CSS Gradient Generator
Create beautiful linear and radial CSS gradients with live preview. Add multiple color stops and copy-ready CSS. Free, no signup.
Preparing private browser tool…
Color reference
Look up any of 539 common colours, including every CSS named colour plus the Tailwind and Material palettes. Each page lists RGB, HSL, HSV and CMYK values, tints and shades, harmonies, and WCAG contrast.
Frequently asked questions
- Linear or radial?
- Both. Linear takes an angle from 0 to 360 degrees; radial always emits radial-gradient(circle, ...) centred in the box. Either can take as many colour stops as you add.
- Can I add more than 2 color stops?
- Yes. Click "Add color stop" to insert additional colors at any position (0-100%).
- Does the output CSS work in all browsers?
- Yes. Modern CSS gradients are supported in all browsers from 2012+. No vendor prefixes needed.
- Can I save or share a gradient?
- Copy the CSS directly. To save, paste it into your stylesheet - there's no account or cloud storage.
- Can I move the centre of a radial gradient?
- Not from the controls. Radial output is always radial-gradient(circle, ...) centred in the box, so add a position such as at 30% 70% to the copied CSS if you need it off-centre.
- What exactly does the copy button put on the clipboard?
- The full declaration, background: linear-gradient(...);, with the stops sorted by position, ready to paste into a rule.