CSS Gradient Generator
Create beautiful CSS gradients with visual editor for linear and radial gradients
90°
0°90°180°270°360°
#1
0%
#2
100%
Alternative Syntax
Webkit prefix:
Background image:
Gradient Quick Reference
Linear Gradient:
linear-gradient(angle, color1, color2)
Creates a gradient along a straight line at the specified angle
Common Angles:
0° = bottom to top
90° = left to right
180° = top to bottom
270° = right to left
Radial Gradient:
radial-gradient(shape, color1, color2)
Creates a gradient radiating from a center point
Color Stops:
Add position (0-100%) to control color placement
#667eea 0%, #764ba2 100%
Tip: Gradients work on background, background-image, and can be combined with other background properties. Use multiple color stops to create more complex gradients.
About the CSS Gradient Generator
Create beautiful CSS gradients with a visual editor. Generate linear and radial gradients with multiple color stops, custom angles, and get ready-to-use CSS code. Perfect for web designers, frontend developers, and anyone creating modern web interfaces.
Features:
- Visual gradient preview with live updates
- Linear and radial gradient types
- Multiple color stops (2-10 colors)
- Custom gradient angle control (0-360°)
- Color picker for each stop
- Position control for each color stop
- One-click CSS code copy
- Preset gradient templates
- Random gradient generator
Gradient Types:
- Linear Gradient: Colors transition along a straight line at any angle
- Radial Gradient: Colors radiate from a center point outward
Use Cases:
- Website backgrounds and hero sections
- Button and card designs
- UI element styling
- Brand color transitions
- Modern web design effects
- CSS learning and experimentation
- Design system creation
Gradient Angles:
For linear gradients, the angle determines the direction of the gradient. 0° creates a bottom-to-top gradient, 90° creates a left-to-right gradient, 180° creates a top-to-bottom gradient, and 270° creates a right-to-left gradient.
Browser Support:
CSS gradients are widely supported in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. No vendor prefixes needed for modern implementations.