CSS Gradient Generator
Create linear-gradient, radial-gradient and conic-gradient CSS. Add color stops, set angle, preview live.
CSS generated is free to use — no attribution required.
How do you use the CSS gradient generator?
Choose the gradient type, then add and drag color stops. For a linear gradient the angle control sets the direction; for radial and conic the center point matters most. Every change updates the preview and the CSS together, so you can copy at any point.
What are the CSS gradient types?
linear-gradient transitions colors along a straight line, with the angle given in degrees — 0deg runs bottom to top, 90deg left to right, 180deg top to bottom. radial-gradient radiates outward from a center point, either as a circle or an ellipse. conic-gradient sweeps colors around a center point, which is what makes pie charts and color wheels possible in pure CSS.
All three have repeating- variants that tile the stop pattern outward instead of stopping at the last color.
What is the CSS gradient syntax?
A gradient is an image, not a color, so it goes wherever an image goes — usually background: linear-gradient(90deg, #6366f1, #22d3ee). That also means it cannot be used with the color property, and it will not appear if background-color is set afterwards in the same shorthand.
Each color can be followed by a position, and a gradient with no positions distributes its stops evenly.
How do color stops and positions work?
A stop position tells the browser where that color reaches full strength: linear-gradient(90deg, red 0%, yellow 30%, blue 100%) compresses the red-to-yellow transition into the first third. Positions can be lengths as well as percentages.
You can also give one color two positions to define a band, and inserting a bare percentage between two colors shifts the midpoint of their blend without adding a color.
How do hard color stops work?
Give two adjacent stops the same position and the blend has nowhere to happen, so the colors meet at a hard edge: linear-gradient(90deg, #6366f1 50%, #22d3ee 50%) is a two-color split, not a fade.
Repeat the pattern and you have stripes without an image. Combined with repeating-linear-gradient this is how CSS-only stripes, checkerboards and progress-bar textures are built.
Why does my gradient look muddy or grey in the middle?
Because gradients interpolate in sRGB by default, and the straight line between two saturated colors in that space passes through a desaturated middle. Blue to yellow is the classic case: the midpoint comes out grey rather than green.
Modern CSS lets you name a better interpolation space with the in keyword — linear-gradient(in oklab, blue, yellow) keeps the midpoint vivid. Support for the color-space syntax is still uneven across browsers, so treat it as an enhancement behind a @supports query, or place an explicit middle color stop, which fixes the problem everywhere.
How do you use a CSS gradient as a text fill?
Set the gradient as the background, then clip it to the glyphs: background: linear-gradient(90deg, #818cf8, #22d3ee) with background-clip: text and a transparent text fill. The -webkit- prefixed forms of both are still needed for the widest support.
Because the text becomes transparent, check the result against your background — gradient text frequently fails contrast checks that the original solid color passed, and it should be reserved for display type rather than reading copy.
Can you animate a CSS gradient?
Not by transitioning between two gradients — they are images, and browsers cannot interpolate one into another. The standard workaround is to make the background much larger than the element with background-size: 200% 100% and animate background-position, which slides the gradient across and reads as movement.
For a genuine color animation, register a custom property with @property so the browser knows it holds a color and can interpolate it, then build the gradient from that variable.
What is the browser compatibility for CSS gradients?
Linear and radial gradients are supported everywhere without prefixes; conic gradients are supported across all current browsers and are the newest of the three. The old -webkit-linear-gradient and filter-based fallbacks target browsers that are long gone. The two pieces worth checking are the in oklab interpolation syntax and background-clip: text, which still wants its prefixed form.