CSS Gradient Generator

°

CSS Output

 
  
 
Full Rule
 
 
 
 
 
   
 
 
 
How to Use
 
     
  1. Pick a gradient type — Linear, Radial, or Conic.
    2.  
  2. Choose colors — Click the color canvas or enter HEX/RGB values. Drag stops on the gradient bar to set positions.
    3.  
  3. Fine-tune — Adjust angle, add up to 5 color stops, or set alpha transparency.
    4.  
  4. Copy & paste — Hit "Copy CSS" and drop it into your stylesheet.
    5.  
 
 
 
What Is a CSS Gradient?
 
A CSS gradient creates smooth color transitions directly in the browser — no image files needed. Defined with background or background-image, gradients render as resolution-independent vectors that stay sharp on any screen.
 
Three types are available: Linear (straight line), Radial (circular/elliptical), and Conic (color-wheel sweep). All are supported in every modern browser without vendor prefixes.
 
 
 
Common Use Cases
 
 
Hero section backgrounds
 
Button hover states
 
Card depth effects
 
Progress bars
 
Image overlays
 
Section dividers
 
 
Tips & Best Practices
 
 
 Keep it simple 
2–3 color stops produce the cleanest results. More than 4 tends to look noisy.
 
 
 Angle matters 
Try 135deg or 150deg instead of flat 90deg for a more dynamic, natural feel.
 
 
 Subtle wins 
Low-contrast gradients with similar hues make excellent backgrounds that don't fight your content.
 
 
 Animate it 
Combine with background-size and background-position for smooth animated gradients.
 
 
 
Frequently Asked Questions
 
 
Does CSS gradient work in all browsers?
 
Yes. Linear, radial, and conic gradients are fully supported in Chrome, Firefox, Safari, and Edge. No vendor prefixes needed.
 
 
 
Can I use transparency in a gradient?
 
Yes. Use the alpha slider to reduce opacity. This creates fade-out effects commonly used for overlay masks on images.
 
 
 
What is the difference between linear and radial?
 
Linear gradients flow in a straight line at any angle. Radial gradients expand outward from a center point in a circular or elliptical shape.
 
 
 
How do I make a full-page gradient background?
 
Apply the gradient to body with min-height: 100vh and background-attachment: fixed to keep it static while scrolling.
 
 
 
Can I animate a CSS gradient?
 
Not directly. But you can animate background-position on an oversized gradient, or use @property (CSS Houdini) for true color-stop animation.