CSS Gradient Generator

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

What does this gradient generator do?

It builds any CSS gradient visually and hands you the code, and it covers ground most generators skip.

• All three gradient types. Linear, radial and conic. Most generators, including the one that ranks first for this search, only do the first two.
• Transparency on every stop. Each colour has its own opacity slider, so you can fade a colour to nothing.
• Repeating gradients. Tick one box for hard-edged stripes, rings or rays that tile forever.
• A movable centre. Radial gradients can be a circle or an ellipse, positioned at any of nine points, not just a circle stuck in the middle.
• Four output formats. A CSS background declaration, the bare gradient value, the four lines that clip a gradient to text, or a Tailwind arbitrary-value class with the escaping already done.

Everything runs in your browser, there is no sign-up, and nothing you make is uploaded. The preview and the code come from the same string, so what you see is precisely what you paste.

How do I use it?

Start from a preset or Surprise me. The presets include the awkward ones: an image overlay, a colour wheel, a spotlight and diagonal stripes.

Pick the type. Linear, radial or conic. Tick repeating if you want a pattern rather than a single sweep.

Set the direction. Linear and conic take an angle. Radial takes a shape and a centre point.

Tune the stops. Each row has a colour, a position along the gradient, and an opacity. Add up to six.

Choose your output and copy. The tab you pick changes the code, and the line underneath says what that code is for.

How do I make an image overlay that fades to transparent?

Drop one stop's opacity to zero and point the angle upward.

This is the single most common gradient on the web: a dark fade sitting on top of a photo so the headline stays readable. The code looks like this, and the Image overlay preset loads it for you:

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

Notice the end colour is written as rgba(0, 0, 0, 0) and not as the keyword transparent. They are the same colour, because transparent is an alias for transparent black, and that used to matter: browsers once faded through grey on the way to nothing when your start colour was not black. The specification moved to premultiplied alpha and Safari finished implementing it in version 15.4, so it is no longer a live bug. Writing the colour out with zero alpha is still the unambiguous form, so that is what this tool generates.

When should I use a conic gradient?

Use a conic gradient when the colours should rotate around a point rather than travel along a line.

It is the type most people never reach for, because most generators do not offer it. A conic gradient sweeps colours around a centre the way a clock hand sweeps the face, which makes it the right tool for a colour wheel, a pie chart drawn in pure CSS, a progress ring, or the metallic sheen you see on modern card designs. It has shipped in every major browser since 2021 and needs no prefix.

Combine it with repeating and you get rays radiating from the centre, which is a single line of CSS replacing what used to be a background image.

How do I put a gradient on text?

Switch the output to Gradient text and copy the four lines.

background: linear-gradient(120deg, #1fa2ff 0%, #a6ffcb 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;

It works by painting the gradient as the element's background, clipping that background to the shape of the letters, then making the text itself transparent so the gradient shows through the holes. Roughly 96 percent of browsers support it today, and the prefixed line is there for the rest.

One accessibility note worth acting on: because the text colour is transparent, a browser that fails to apply the clip renders invisible text. Keep the contrast between the gradient and the background high, and treat gradient text as decoration for headings rather than something to run body copy through.

What makes a gradient look good?

• Two to four colours. More usually turns muddy.
• Neighbours on the colour wheel blend smoothly. Opposites pass through grey in the middle.
• Add a middle stop to steer where the blend sits, instead of only controlling the ends.
• Mind contrast if text sits on top. A subtle gradient reads better than a loud one.
• Two stops at the same position create a hard edge instead of a blend. That is the trick behind stripes.

What this tool does not do

• It does not animate. CSS cannot interpolate between two gradients directly, so animated gradients are usually a large background being moved with background-position. That is a different technique and this tool does not generate it.
• It does not do mesh gradients. Those soft multi-point blends you see in modern branding are layered radial gradients or an SVG, not a single CSS gradient.
• It does not save your gradients. Nothing is stored between sessions. Copy what you want to keep before closing the tab.
• It does not check contrast for you. It will happily build a gradient that makes your text unreadable. Check text contrast separately before shipping.
• It does not add vendor prefixes to the gradient itself. None are needed any more; every gradient type here works unprefixed in current browsers. The only prefixed line we output is the -webkit-background-clip for gradient text.

Is my data private?

Yes. The generator is fully client-side. Your colours and settings are never uploaded, logged, or stored, and they clear when you close the tab. It keeps working offline once the page has loaded, so you can design gradients anywhere.