CSS Gradient Generator
Create beautiful CSS gradients with live preview. Design linear, radial, and conic gradients with full control over colors, angles, and positions.
.gradient-element {
background: -webkit-linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: -moz-linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: -o-linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}Recommended Settings
Gradient Best Practices
- •Use 2-4 color stops for simple, clean gradients
- •Keep contrast high for text readability over gradients
- •Linear gradients at 45° or 135° angles are most visually pleasing
- •Radial gradients work best centered or in corners
- •Conic gradients shine for circular UI elements and data viz
Performance Tips
- •CSS gradients are more performant than gradient images
- •Avoid animating gradients directly (animate opacity or transform instead)
- •Use vendor prefixes for maximum browser compatibility
- •Complex gradients (10+ stops) can impact paint performance
- •Consider using CSS custom properties for dynamic gradients
Pro Tips
- •Complementary colors create vibrant, eye-catching gradients
- •Analogous colors (next to each other on color wheel) create harmonious gradients
- •Add a middle color stop to create smooth transitions between contrasting colors
- •Use transparent color stops to fade gradients to nothing
Most Popular
linear-gradient(135deg, #667eea 0%, #764ba2 100%)
When to Use This Tool
Create stunning hero backgrounds with vibrant linear gradients. Perfect for drawing attention and setting the tone of your website.
Recommended: Sunset or Ocean preset with 135° angle
Add depth to buttons with subtle gradients. Animate gradient position on hover for interactive micro-interactions.
Recommended: Lavender or Royal Blue preset
Layer semi-transparent gradients over images to ensure text readability while maintaining visual interest.
Recommended: Linear gradient with rgba() values
Conic gradients are perfect for circular progress indicators and loading spinners. Animate rotation for dynamic feedback.
Recommended: Rainbow preset with conic gradient
Use gradients to represent ranges in heatmaps, charts, and graphs. Color progression helps users understand data patterns.
Recommended: Custom gradients matching data scale
How It Works
Select gradient type: Linear (directional), Radial (circular), or Conic (rotating)
Choose a preset or start with default colors
Adjust angle/direction for linear gradients or position for radial/conic
Add, remove, or reorder color stops to create your gradient
Fine-tune each color stop's color and position (0-100%)
Use Reverse to flip gradient direction or Randomize for inspiration
Preview your gradient on different shapes to see how it looks
Copy CSS code with vendor prefixes for maximum compatibility
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Pure JavaScript for optimal performance on modern browsers.
Secure
No data collection, no tracking, no sign-up required.
Frequently Asked Questions
How many color stops can I add?
You can add up to 10 color stops to create complex, multi-color gradients. Each stop has a color and position (0-100%). For best visual results, start with 2-4 stops and add more as needed. Too many stops can make gradients look busy.
What's the difference between linear, radial, and conic gradients?
Linear gradients transition colors along a straight line at a specified angle. Radial gradients emanate from a center point in a circular or elliptical shape. Conic gradients rotate colors around a center point like a color wheel - perfect for pie charts and progress indicators.
Do I need vendor prefixes?
Modern browsers (Chrome 26+, Firefox 16+, Safari 6.1+) support gradients without prefixes. However, including -webkit-, -moz-, and -o- prefixes ensures compatibility with older browsers. This tool automatically includes all necessary prefixes in the generated CSS.
Can I use gradients with transparency?
Yes! Use rgba() or hsla() color values to create gradients that fade to transparent. For example: linear-gradient(135deg, rgba(255,0,0,1) 0%, rgba(255,0,0,0) 100%) creates a red to transparent gradient. This is perfect for overlays over images.
How do I create a gradient that repeats?
Use repeating-linear-gradient() or repeating-radial-gradient() in your CSS instead of the standard functions. These create patterns by repeating the gradient. For example: repeating-linear-gradient(45deg, #000 0px, #000 10px, #fff 10px, #fff 20px) creates diagonal stripes.
Why does my gradient look banded or have visible steps?
Color banding occurs when there's a large distance between color stops or when using very different colors. To fix: 1) Add intermediate color stops to smooth transitions, 2) Use colors closer together on the color wheel, 3) Add a middle color stop that blends the extremes, 4) Use HSL colors which blend more naturally than RGB.