Create beautiful CSS gradients visually — linear, radial, conic — copy with one click
Settings
CSS Output
FREQUENTLY ASKED QUESTIONS
What is a CSS gradient?
A CSS gradient creates smooth transitions between colors without using images. Linear gradients transition along a line, radial gradients radiate from a point, and conic gradients sweep around a center point.
How many color stops can I add?
Unlimited — click '+ Add Stop' to add more. Each stop has a color and position (0-100%). For smooth gradients, use 2-4 stops. For complex patterns, you can use many more.
How do I use this in my CSS?
Copy the generated CSS and paste it into your stylesheet. Example: .hero { background: linear-gradient(135deg, #e8c84a 0%, #0d0d0d 100%); }
Can I use gradients as text fills?
Yes. Apply the gradient as background, then add -webkit-background-clip: text; background-clip: text; color: transparent; This clips the gradient to the text shape.