CSS Gradient Generator
Create beautiful linear and radial gradients with multiple color stops. Perfect for web design, backgrounds, and CSS styling.
Gradient Settings
%
%
Gradient Preview
400px
200px
Rectangle
Circle
Rounded
Generated Code
CSS
background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);CSS with Fallback
background: #3B82F6;
background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);React/JSX
style={{ background: 'linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%)' }}Gradient Information
Gradient Details
Type:linear
Direction:90deg
Color Stops:2
Color Stops
#3B82F6at 0%
#8B5CF6at 100%
How to Use CSS Gradients
Linear Gradients
- Create smooth transitions between colors in a straight line
- Control direction with angles (0deg = top, 90deg = right)
- Add multiple color stops for complex gradients
- Perfect for backgrounds, buttons, and overlays
Radial Gradients
- Create circular or elliptical color transitions
- Colors radiate from center outward
- Great for spotlight effects and focal points
- Use for buttons, icons, and decorative elements
Related Color Tools
Ready to Apply Your Gradients?
Use our paint calculators to estimate materials for gradient-inspired paint projects.