CSS Gradient Generator
Create beautiful CSS linear and radial gradients visually.
CSS Code
About CSS Gradient Generator
Create CSS linear and radial gradients by picking colors, adjusting positions, and setting the gradient direction or shape. Get the complete CSS background-image property code, ready to paste into your stylesheet.
Use Cases
Designing hero section backgrounds, creating button gradients, building decorative UI elements, generating gradient overlays for images, CSS background design.
How It Works
Generates the standard CSS background-image: linear-gradient(direction, color1 stop1%, color2 stop2%) syntax. Previews update live as you adjust controls.
Frequently Asked Questions
Can I add more than 2 color stops?
Yes. Add up to 5 color stops and set each stop's position.
Does it support radial gradients?
Yes. Toggle between linear and radial. For radial, choose shape (circle/ellipse) and position.