Tooltrusty

CSS Gradient Generator

Drag the stops, watch the preview, copy the CSS — linear, radial or conic.

Colour stops

Runs in your browser. Everything you type or load here is processed locally by JavaScript on this page. Nothing is uploaded to Tooltrusty or to any third party.

What the cSS Gradient Generator does

CSS gradients are drawn by the browser rather than downloaded as images, which means they scale to any size, cost nothing in bandwidth and can be animated. Writing one by hand is fiddly, though, because you cannot see what a set of numbers looks like until you reload the page. This generator gives you the preview and the code at the same time.

Three gradient types are available. A linear gradient runs along a straight line at an angle you set; 0° points up, 90° points right, and 135° gives the diagonal that most interface designs use. A radial gradient spreads outward from a centre point, which suits spotlights and soft vignettes. A conic gradient sweeps around a centre like a clock hand, and is what you use to build pie charts, colour wheels and angular shine effects in pure CSS.

Colour stops are the real controls. Each stop has a colour and a position expressed as a percentage of the gradient's length. Two stops give a simple fade; adding a third lets you control where the midpoint falls, which is usually what separates a gradient that looks considered from one that looks accidental. Placing two stops at the same position creates a hard edge rather than a blend — the standard trick for CSS stripes.

The output is a single background declaration you can paste directly into a stylesheet. Every current browser supports all three gradient types without vendor prefixes.

How to use it

  1. Pick a gradient type and, for linear or conic, set the angle.
  2. Adjust the colour and position of each stop, or press Add a colour stop for finer control.
  3. Use Randomise to generate a harmonious three-colour starting point when you have no fixed palette.
  4. Copy the CSS and paste it into your stylesheet.

A worked example

A typical card background, built from three stops on a diagonal:

background: linear-gradient(135deg, #c6f24e 0%, #66e0c0 52%, #8bb4ff 100%);

Two variations worth knowing. Move both of the first two stops to the same position and the blend becomes a hard edge, which is how CSS stripes are made:

background: linear-gradient(135deg, #c6f24e 0%, #c6f24e 50%, #66e0c0 50%, #66e0c0 100%);

Switch the type to conic and the same stops wrap around a centre point instead, giving you the basis of a pie chart or a colour wheel without a single image file.

Frequently asked questions

What angle should I use for a linear gradient?

In CSS, 0° points to the top and angles increase clockwise, so 90° points right and 180° points down. 135° produces the top-left to bottom-right diagonal that most interface work uses, because it reads as light falling from above.

How do I make a gradient with a hard edge instead of a blend?

Place two stops at the same percentage. The colour changes instantly at that point rather than fading, which is the standard technique for stripes, progress bars and two-tone backgrounds.

Do gradients need vendor prefixes?

No. Unprefixed linear-gradient, radial-gradient and conic-gradient are supported by every browser in current use. Prefixed versions are only needed for browsers that are long out of support.

Can I animate a CSS gradient?

Not the gradient itself — colour stops are not interpolated by the browser. The usual approaches are to animate background-position on an oversized gradient, to cross-fade two stacked layers with opacity, or to animate a CSS custom property with @property in browsers that support it.