CSS Gradient Generator

A gradient is a list of colour stops and a direction, and the CSS for it is short enough to write by hand and fiddly enough that nobody wants to. The CSS Gradient Generator gives you a live preview, draggable stop positions, and the exact declaration to paste, updating on every change rather than behind a build button.

Three gradient types are available. linear takes an angle in degrees, where 0 runs bottom to top and 90 runs left to right. radial spreads from the centre outward and ignores the angle entirely, which is why the slider disappears when you select it. conic sweeps around the centre and uses the angle as its starting point, which is what makes pie charts and colour wheels possible in pure CSS.

Six presets sit above the controls, each rendered in its own gradient so the button is the swatch. Midnight is the one worth opening: it carries 3 stops rather than 2, with the middle one at 50%, which is how you build a gradient that holds a colour before moving on.

Running Up a Multi-Stop Gradient

1. Start from a preset rather than the default 2-stop violet-to-cyan, since editing an existing harmony is faster than inventing one.
2. Press Add Stop. The new stop is white and lands at the midpoint of the widest gap between existing stops, so repeated clicks spread out rather than piling up near 0%.
3. Set each colour by swatch or by typing hex, and drag its slider to position it. Rows are always displayed in position order, so a stop you drag past its neighbour visibly changes places.
4. Adjust Angle for linear and conic. The dustbin icon removes a stop and greys out at 2, because a gradient needs at least two colours to interpolate between.
5. Take Copy Value for just the linear-gradient(...) function to drop into an existing declaration, or Copy Full CSS for a ready-made block.

What Happens When Stops Overlap

• Two stops at the same position produce a hard edge instead of a blend. That is the documented way to build a stripe, and it is worth knowing before you assume it is a bug.
• Stops are written in the order they are displayed, which is position order, so the CSS is always valid even if you dragged one past another.
• No stop is pinned to 0% or 100%. Move your first stop to 20% and the colour simply holds flat across the leading fifth of the box.
• Interpolation happens in sRGB, so a blend between two saturated complements passes through a muddy grey in the middle. Adding a third stop at the midpoint is the usual fix.
• The Copy Full CSS block includes a -webkit-background line, which is not a real property and is ignored by every browser. The background and background-image lines around it are the ones doing the work.