A gradient generator that hands you the CSS
The output is a single declaration you can paste straight into a stylesheet. No image is generated and nothing is downloaded, because a CSS gradient scales to any size, costs no bytes, and stays sharp on every display — which a background image does not.
The preview is the actual gradient rendered by your browser, not an approximation of it. What you see is exactly what the CSS will do.
- Backgrounds for a page, a card or a hero section
- A gradient to check against a design before writing it out
- Something to fill a screen with, using the fullscreen button
Linear, radial and conic
Linear runs along an angle and is what people mean nine times out of ten. Radial spreads from the centre outward, which suits a spotlight or a vignette. Conic sweeps around a point and is the one that makes colour wheels and pie charts possible in pure CSS.
Conic is worth checking in your target browsers. Linear and radial have been supported everywhere for years; conic is newer.
Colours that go together
The random button does not pick two independent colours — it picks a hue and then a second one a comfortable distance around the wheel. Two genuinely random colours clash almost every time, which is why most gradient randomisers are useless.
Everything is kept in the address bar, so a gradient you like is a link rather than something to rebuild.