CSS Gradient Generator
Create stunning CSS gradients with real-time preview and copy-paste code
Gradient Type
Live Preview
Color Stops
Color 1
0%
Color 2
100%
Drag colors or adjust positions to create your perfect gradient
Generated CSS
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);.gradient {
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
}Preset Gradients
What is a CSS Gradient?
CSS gradients are smooth transitions between two or more colors. They can be used as backgrounds, overlays, or decorative elements. Our gradient generator makes it easy to create linear and radial gradients with a visual editor. Simply choose colors, adjust positions, and copy the generated CSS code directly into your stylesheet.
Types of CSS Gradients
- Linear Gradient: Creates a gradient along a straight line in any direction (horizontal, vertical, or diagonal)
- Radial Gradient: Creates a gradient radiating from a center point in a circular or elliptical shape
How to Use
- Choose between linear or radial gradient type
- Select direction (linear) or shape (radial)
- Add, remove, or adjust color stops
- Fine-tune each color's position along the gradient
- Copy the generated CSS code and paste it into your stylesheet
Key Features
- Live preview: See your gradient in real-time as you edit
- Multiple color stops: Add up to 10 colors in a single gradient
- Preset gradients: Start with beautiful pre-made gradient combinations
- Randomize colors: Generate random color combinations for inspiration
- Copy CSS code: One-click copy of generated gradient code
- Both linear and radial: Support for all CSS gradient types