How to use the css gradient generator
- Pick a preset or start with the default two-stop gradient.
- Choose linear, radial or conic, then set the angle (linear/conic), shape (radial) and position.
- Add, recolour, reposition, reorder or remove colour stops; the preview updates live.
- Switch the output to CSS or Tailwind and copy it into your stylesheet or markup.
Features
- Linear, radial (circle/ellipse at nine positions) and conic gradients
- Up to ten colour stops with pickers, HEX input and position sliders
- Presets for common looks and a live preview box
- CSS output with a solid fallback colour computed from your stops
- Tailwind bg-[...] arbitrary value output
Gradient syntax at a glance
All three functions take a list of colour stops; what differs is the geometry:
- linear-gradient(90deg, #000 0%, #fff 100%): colours change along a line. 0deg points up, 90deg to the right, 180deg down.
- radial-gradient(circle at top left, …): colours radiate from a point. circle keeps equal radii; ellipse stretches to the box.
- conic-gradient(from 0deg at center, …): colours sweep around a centre like a pie chart; ending on the same colour you started with makes a seamless wheel.
- Stops with the same position create hard edges; stripes and colour bands are made this way.
Why the CSS includes a fallback line
Gradients are supported everywhere modern, but a plain background colour declared before the gradient means anything that cannot render the gradient (very old browsers, some email clients) still shows a sensible solid colour. Browsers that understand gradients simply use the second declaration.