Gradient Generator

Features

• Linear, radial and conic gradients
• Unlimited colour stops with position control
• Live preview at full width
• Copies plain CSS or a Tailwind arbitrary value
• Eight starting presets

How to use it

1. Pick a gradient type.
2. Adjust the colour stops and their positions.
3. Set the angle for linear and conic gradients.
4. Copy the CSS straight into your stylesheet.

Getting gradients to look right

The commonest problem is the grey dead zone. Interpolating between two saturated complementary colours in sRGB passes through a desaturated middle, blue to yellow goes through a muddy grey rather than through green. Adding an intermediate stop in the hue you actually want fixes it. Newer CSS lets you interpolate in a perceptual space with in oklch, which avoids the problem entirely, though browser support is still uneven.

Banding is the other frequent complaint, visible as distinct stripes across a large, subtle gradient. It happens because 8-bit colour has only 256 levels per channel, and a gentle transition across a wide area cannot supply enough distinct values. Adding a very subtle noise texture over the top is the standard fix and works well.

Angles are worth memorising because CSS differs from the mathematical convention: 0deg points up, 90deg points right, and the angle increases clockwise. Conic gradients are the odd one out in usefulness, they are the natural way to build pie charts and colour wheels in pure CSS, since the colour sweeps around a centre point rather than along a line.