CSS Gradient Generator
Design linear and radial CSS gradients with live preview.
Design beautiful linear and radial CSS gradients with a live preview. Pick your colors, set the angle, and copy the ready-to-use CSS background rule for your website.
90°
background: linear-gradient(90deg, #6d28d9, #ec4899);Runs entirely in your browser — nothing is uploaded.
How to use the css gradient generator
- 1Choose a linear or radial gradient.
- 2Pick your two colors and set the angle.
- 3Copy the generated CSS.
Frequently asked questions
How do I use the generated CSS?
Paste the background rule onto any element, e.g. a div or a section, and the gradient appears as its background.
Can I control the gradient direction?
Yes — for linear gradients, use the angle slider to set the direction from 0 to 360 degrees.