CSS Gradient Generator
CSS gradient generator online free. Create linear, radial, and conic gradients with visual editor. Multiple color stops, angle control, and live preview—free gradient maker.
Need Inspiration?
Check out our collection of 60+ ready-to-use gradients.
Preview
Color Stops (2)
CSS Code
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
Properties
Angle 90°
Quick Presets
Gradient Library
Inspiration Gallery
Browse our curated collection of premade gradients
Sunset Vibes
Ocean Blue
Purple Love
Piggy Pink
Cool Blues
Mega Tron
Green Beach
Sunny Days
Citrus Peel
Azure Pop
Cosmic Fusion
Deep Space
Metallic
Morning Mist
Ripe Malinka
Perfect White
Soft Grass
Rare Wind
Near Moon
Wild Apple
Features
- Linear and Radial gradient support
- Multi-stop color picker
- Angle/Direction control
- Visual preview area
- Cross-browser vendor prefixes
- CSS variable support
Common Use Cases
- Create beautiful backgrounds
- Design buttons with depth
- Generate metallic or glossy effects
- Create stripes or patterns
- Replace background images with CSS
CSS Gradients
CSS gradients let you display smooth transitions between two or more specified colors. Browsers support two types of gradients: linear and radial.
Linear Gradients:
Colors change along a straight line (up, down, diagonal).
Syntax: background: linear-gradient(direction, color-stop1, color-stop2, ...);
Radial Gradients:
Colors emanate from a center point.
Syntax: background: radial-gradient(shape size at position, start-color, ..., last-color);
Examples
Valid - Sunset Linear
linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%) Valid - Simple Radial
radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%) Valid - Stripes
linear-gradient(90deg, #000 50%, #fff 50%)Frequently Asked Questions
Do I still need vendor prefixes?
For modern browsers, no. `linear-gradient` is widely supported. However, for supporting very old browsers (like old Android or iOS versions), prefixes like `-webkit-` might be needed.
How do I create hard edges?
By setting two color stops at the same location. E.g., `red 50%, blue 50%` creates a sharp line between red and blue at the halfway point.
Can I overlay gradients?
Yes! You can specify multiple background images separated by commas. `background: linear-gradient(...), url(image.jpg);`.
💡 Tips
- Use semi-transparent colors in gradients to create sophisticated overlays on images.
- Linear gradients can be used to create custom underlines or borders.
- Use `conic-gradient` (modern browsers) for pie charts or color wheels.