CSS Gradient Generator
Colors
Presets
How to make a CSS gradient
- Pick a type: linear runs in a straight line at the angle you set, radial spreads out in a circle from the middle, and conic turns around the middle from the angle you set.
- Change each color and drag its slider to set where it sits, from 0% to 100%. Add a color puts a new one in the widest gap, up to six; ✕ removes one.
- Or press a preset to start from it. The preview updates as you go; Copy CSS copies the lines to paste into your stylesheet.
Frequently asked questions
Why are there two background lines?
The first is a plain color for the rare browser that cannot draw gradients; the second overrides it everywhere else.
What does the angle mean?
For a linear gradient, 0deg runs from bottom to top, 90deg from left to right and 180deg from top to bottom. For a conic gradient it is where the first color starts, turning clockwise from the top.
Can I use the gradient on text or a border?
Yes. For text, set it as the background and add background-clip: text and color: transparent. For a border, use it in border-image with border-image-slice: 1.