Tune a front-end background
Drag stops and the angle to try colours live, then copy the background CSS once it looks right.
Loading…
Guide
The CSS gradient generator edits linear, radial and conic gradients visually and produces copyable CSS at the same time. Stops can be dragged along the bar, added by clicking an empty spot and recoloured, and at least two are kept. A linear gradient has a 0–359° direction; a radial one offers circle or ellipse with nine centre positions; a conic one takes a start angle and a centre position. The page also offers “random inspiration” built on the Web Crypto random module, producing analogous, complementary or triadic schemes.
Updated 2026-09-102 min read
-webkit- form, and the first line gives a solid-colour fallback.| Input | Output | Notes |
|---|---|---|
| 135°, two stops | linear-gradient(...) |
The CSS is generated alongside |
| A conic gradient centred bottom-right | A PNG wallpaper | Canvas draws at the chosen preset size |
Drag stops and the angle to try colours live, then copy the background CSS once it looks right.
Export the same gradient as a PNG at a 4K desktop size or a portrait phone size.
No. It picks a base hue and an analogous, complementary or triadic scheme at random, then randomises saturation, lightness and the linear angle.
The first line is a solid-colour fallback; the linear and radial forms also carry the legacy WebKit syntax, and the last line is the modern standard gradient.
Colours, CSS and the PNG are all computed and generated locally in the browser, with no request to a remote colour or image service.
Updated 2026-09-10
Visually edit linear, radial and conic gradients; copy the CSS or export a PNG wallpaper
Drag a stop to move it; click an empty spot to add one
background: #6366f1; /* fallback for old browsers */ background: -webkit-linear-gradient(315deg, #6366f1 0%, #ec4899 100%); background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);