CSS Gradient Generator
Create beautiful CSS gradients visually. Add color stops, choose gradient types, adjust angles, and copy the CSS code.
#667eea
rgb(102, 126, 234)
hsl(229, 76%, 66%)
oklch(0.627 0.164 271.5)
cmyk(56%, 46%, 0%, 8%)
Use Cases
Website hero section backgrounds
Button hover effects
Card and container backgrounds
Social media graphics
Tips
Use 2-3 stops for clean gradients, 4+ for complex effects
Radial gradients work great for spotlight effects
Conic gradients can create pie charts and color wheels
FAQ
What types of CSS gradients are there?
Three types: linear-gradient, radial-gradient, and conic-gradient.
How do I create a gradient in CSS?
Use: background: linear-gradient(90deg, #ff0000, #0000ff); for a horizontal red-to-blue gradient.
Can I add multiple color stops?
Yes. Add as many stops as you want: linear-gradient(90deg, red 0%, orange 25%, yellow 50%, green 75%, blue 100%).
Do gradients work in all browsers?
Yes, CSS gradients are supported in all modern browsers. No vendor prefixes needed.