CSS Gradient Generator
Build linear, radial and conic gradients visually — add color stops with alpha, tweak the angle and exact positions, 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, a radial gradient with a shape and origin, or a conic sweep — and toggle repeating to tile any of them.
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. A conic gradient rotates the colors around a
center point, and any type can be set to repeat so the pattern tiles across the box.
Each color stop is a color plus an optional position from 0% to 100%, and you can
dial in per-stop transparency (the preview shows a checkerboard behind translucent
colors). 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, radial and conic 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.