CSS Gradient Generator
Build linear and radial gradients visually — add color stops, tweak the angle, and copy the CSS the moment it looks right.
How the gradient generator works
Everything renders live in your browser — pick colors, drag the angle, and the CSS is written for you.
Choose a type
Switch between a linear gradient with an adjustable angle or a radial gradient with a shape and origin.
Add color stops
Add as many stops as you like, set each color, and slide its position. Two stops minimum — the rest is up to you.
Copy or download
Grab the ready-to-paste background declaration, or export a PNG of the gradient for mockups.
About CSS gradients
A linear gradient blends colors along a straight line. The angle sets the
direction: 0deg points straight up, 90deg points to the right, and the
values increase clockwise. A radial gradient blends outward from a center point,
shaped as a circle or an ellipse.
Each color stop is a color plus an optional position from 0% to 100%. The browser
smoothly interpolates between them. Because a gradient is just a value for the CSS
background property, you can drop the generated code straight into a stylesheet,
an inline style attribute, or a component.
Private by design. Every color and preview is computed right here in your browser. Nothing you build is ever uploaded, saved, or sent anywhere.
Frequently Asked Questions
What's the difference between linear and radial gradients? ▼
How many color stops can I add? ▼
How do I use the generated code? ▼
background value and paste it straight into your stylesheet, an inline style attribute, or a component. It's a standard CSS value that works anywhere a background does.