What the CSS Gradient Generator does
This gradient generator builds linear, radial and conic CSS gradients from colour stops you can drag, type or pick, shows the result on a preview panel, a card, a button and clipped text, and gives you clean background-image CSS with an optional solid background-color fallback.
Everything is worked out in your browser from the rules in CSS Images Module Level 4: how missing stop positions are filled in, what a colour hint does to the transition, and how browsers blend a colour into transparency. Nothing you design is uploaded.
How to use it
- Choose Linear, Radial or Conic, or start from one of the four examples.
- Set the direction. Linear gradients take an angle (0deg points up, 90deg points right); radial gradients take a shape, a size keyword and a centre; conic gradients take a starting angle and a centre.
- Edit the colour stops. Drag a handle on the bar, use the arrow keys on a focused handle, or type a position. Leave a position blank and the browser spaces that stop evenly between its neighbours.
- Add a hint (a percentage between two stops) to move the point where the colours meet halfway, without adding another stop.
- Tick Repeating to tile the stop pattern, for stripes or rings, then copy the CSS, just the value, or download a small stylesheet.
Reading the results
The CSS block has two declarations. background-color is the average colour along the gradient line, so text stays readable if the image layer fails or is switched off; background-image is the gradient itself.
Warnings explain anything a browser would silently change, such as a stop placed before an earlier one (browsers move it forward) or a repeating gradient whose stops already span 0-100%, which never visibly repeats.
The card, button and text samples show how the same gradient behaves at small sizes. A gradient that looks rich on a large panel can become muddy on a button, and gradient text needs strong contrast along its whole length.
Worked example: a black-to-white gradient with a 25% hint
Take linear-gradient(90deg, #000000 0%, 25%, #ffffff 100%). Without the hint, the colour at 50% would be exactly halfway: channel value 127.5.
The hint moves the halfway point to 25%. CSS Images 4 bends the transition with the exponent ln(0.5) / ln(0.25) = 0.5, so at 50% the mix is 0.5 to the power 0.5 = 0.7071, and each channel is 255 x 0.7071 = 180.3, about #b4b4b4. The midpoint is already well past mid-grey because the transition was pulled towards the start.
The fallback for plain black to white is the average along the line: 127.5, which rounds to 128, so background-color: #808080.
Why fading to transparent no longer turns grey
Older browsers blended colours without accounting for alpha, so fading red into transparent (which is transparent black) passed through a dull brownish band. CSS Images 4 requires premultiplied interpolation: colours are weighted by their opacity before mixing. Red fading to transparent now stays red while only its opacity falls, which is what the preview here shows.
If you need an older engine to match, fade to a transparent version of the same colour, such as rgba(255, 0, 0, 0), instead of the keyword.
Hard stops, stripes and repeating gradients
Two stops at the same position make a hard edge with no transition. That is how stripes, progress bars and flag patterns are drawn in pure CSS. A repeating gradient then tiles the pattern: with stops at 0%, 5%, 5% and 10% the stripe pair repeats every 10% of the gradient line.
The browser draws gradients at the element's size, so a repeating pattern of percentages grows with the element. Use lengths such as 20px if the stripe width must stay fixed.
Limitations: what the result does not prove
- Colours are mixed in sRGB, the default for gradients in current browsers. CSS Color 4 also allows other interpolation spaces (for example
in oklch), which some browsers support; this tool does not write them. - The fallback is an average along the gradient line. For radial and conic gradients the area average can differ, because more of the element may be covered by one end of the gradient.
- The preview shows how your browser renders the CSS. Very old browsers without conic or repeating gradient support will show only the fallback colour.
- Contrast between gradient backgrounds and text is not measured here; check the lightest and darkest points of the gradient against your text colour.
Privacy: where your data goes
Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- CSS Images Module Level 4 (gradients) - checked 19 Sep 2026
- W3C - CSS Images Module Level 4: gradients
- MDN - Using CSS gradients
- W3C - CSS Color Module Level 4: interpolation
Frequently asked questions
What does a colour hint do in a CSS gradient?
A hint is a lone percentage between two stops. It moves the point where the two colours are mixed 50/50. Without a hint that point is halfway between the stops; with a hint at 25% the transition happens quickly at first and slowly afterwards, following the curve defined in CSS Images 4.
Why does my gradient to transparent look grey in old screenshots?
Older rendering blended colours without taking opacity into account, so fading to transparent black passed through grey. Modern browsers use premultiplied interpolation, which keeps the hue and only lowers the opacity. Fading to a transparent version of the same colour avoids the problem everywhere.
What is the difference between a radial and a conic gradient?
A radial gradient changes colour moving outwards from a centre, giving circles or ellipses of colour. A conic gradient changes colour moving around a centre, like the hands of a clock, which is how pie charts and colour wheels are drawn in CSS.
Do I still need vendor prefixes such as -webkit-linear-gradient?
Not for current browsers. The unprefixed syntax has been supported for many years, and the prefixed forms used a different angle convention, so copying old prefixed code can flip your gradient. This generator writes only the standard syntax.
How do I make sharp stripes instead of a smooth blend?
Put two stops at the same position, for example yellow 0% to 5% and then black 5% to 10%. The colour jumps at 5% with no transition. Tick Repeating to tile the pattern along the whole element, or use the Repeating stripes example as a starting point.
Why include a background-color fallback with a gradient?
If the gradient cannot be drawn - a very old browser, a forced-colours mode, or a stylesheet that overrides background-image - text still needs a background to be readable. A solid colour close to the gradient's average keeps the design and the contrast roughly intact.
Last reviewed by the A2Z.Tools team against the sources listed above.
