CSS Gradient Generator

background: linear-gradient(90deg, #7c3aed 0%, #f25f3a 100%);

How do you make gradient text in CSS?

Paint the gradient as the element's background, clip that background to the letters, and make the text itself transparent so the colours show through. Pick Gradient text above and the tool writes the four lines for you:

background: linear-gradient(90deg, #7c3aed 0%, #f25f3a 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;

It works in about 97% of browsers in use today; the prefixed line covers older Safari and Chrome. When it goes wrong, it is almost always one of three things:

• The text shows as a solid colour. A later rule sets color again, so the text is no longer transparent and covers the gradient. Look for it in your inspector.
• Only one slice of the gradient shows. The gradient spans the whole element, so a short word inside a full-width heading gets a single colour. Add display: inline-block so the box hugs the text.
• The text is invisible. If the clip is not applied, transparent text on a plain background reads as nothing. Keep gradient text for headings, and check that the palest stop still contrasts with the page.

In Tailwind, use the Tailwind output and add bg-clip-text text-transparent to the same element.

Linear, radial or conic: which one do you need?

• Linear blends along a straight line at the angle you set. It is the one for backgrounds, buttons and image overlays.
• Radial spreads out from a centre, as a circle or an ellipse. It suits glows and spotlights, and here the centre can sit at any of nine points, such as the top of the box for a stage light.
• Conic sweeps the colours around a centre like a clock hand. It is the right type for a colour wheel, a pie chart drawn in pure CSS or a progress ring, and every major browser has supported it, unprefixed, since late 2020.

How do you fade an image into transparency?

Put a linear gradient on top of the photo, with one stop at zero opacity. The Image overlay preset loads the most common version, a dark fade that keeps a headline readable:

background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);

The end colour is written as rgba(0, 0, 0, 0) rather than the keyword transparent. They are the same colour, transparent black, and older browsers used to fade through grey on the way to it. Modern browsers no longer do, but writing the colour with zero alpha is the form that cannot be misread, so every stop with opacity below 100% comes out that way.

Can it make CSS background patterns?

Some of them. Turn on Repeating in the Presets panel and give two stops the same position: the colour changes with a hard edge instead of a blend, and the gradient tiles forever. That gives you stripes with linear, rings with radial and rays with conic. The Stripes preset is one example:

background: repeating-linear-gradient(45deg, #2b2d36 0%, #2b2d36 8%, #f25f3a 8%, #f25f3a 16%);

Dots, grids and checkerboards need one more ingredient, background-size, and often several gradients layered together, which this generator does not write. The checkerboard behind our own preview is a single line you can copy and adapt:

background: repeating-conic-gradient(rgba(128,128,128,.22) 0% 25%, transparent 0% 50%) 50% / 20px 20px;

Can you animate a CSS gradient?

Not directly. A gradient is an image, and the browser cannot blend one image into another, so a transition on it jumps straight to the end. Two techniques do work. You can make the gradient larger than the element and move it with background-position, or you can register a custom property with @property and animate a value inside the gradient, such as the angle or a stop position. @property works in current Chrome, Safari 16.4 and later, and Firefox 128 and later. This tool writes the static gradient you start from.

Why does a gradient look muddy in the middle?

Because two colours far apart on the colour wheel, such as blue and yellow, pass through grey when the browser blends them. Three fixes, from simplest to newest:

• Add a middle stop with a colour you choose, so the blend never crosses the grey zone.
• Pick neighbouring colours, like blue to purple, which blend cleanly.
• Blend in a different colour space: writing linear-gradient(in oklch, …) keeps the middle saturated in current browsers. This generator does not add it for you, so paste it in after copying.