CSS Gradient Generator
Build linear and radial CSS gradients visually, with multiple colour stops and angles, then copy the CSS. Free and instant, no signup.
Build a gradient and copy the CSS
Choose linear, radial or conic, set the angle by clicking around the dial or typing degrees, and adjust up to six colour stops, each with a colour and a position in percent. The preview updates on every change and the CSS below it is a single background declaration ready to paste: linear-gradient(135deg, #6366f1 0%, #ec4899 100%), with radial-gradient(circle, ...) and conic-gradient(from 90deg, ...) for the other two types.
Eight presets give a starting point; loading one replaces the type, angle and stops, after which everything is editable. Stops are sorted by position when the CSS is written, so moving one past another does not produce a reversed gradient. Two stops is the minimum and the remove button disables itself at that point.
Some things are deliberately not here: no repeating gradients, no custom radial shape or centre position, no layered gradients and no vendor prefixes, since every current browser supports the unprefixed syntax. Angles follow the CSS convention where 0deg points up and 90deg points right, which is the opposite of what many image editors assume.
Frequently asked questions
What does the angle mean in a CSS gradient?
It is the direction the gradient travels: 0deg runs bottom to top, 90deg left to right, 180deg top to bottom. Image editors often measure from a different zero, so a gradient copied from a design file may need converting.
Why does my gradient show visible bands?
Two colours stretched across a large area leave fewer than 256 shades per channel to work with. Add an intermediate stop, choose colours closer in hue, or keep the gradient to a smaller region.
Can I use a gradient on text?
Yes. Apply the copied background to the text element, then add background-clip: text and color: transparent. The -webkit- prefixed form of background-clip is still needed in some browsers.
Can a stop be semi-transparent?
Not from the picker, which produces opaque hex colours. Copy the CSS and replace a stop with an rgba() or an eight-digit hex value such as #ec489980.