CSS Gradient Generator
Design beautiful gradients for your website backgrounds and UI elements.
Visually edit colors, angles, and positions, then copy the CSS code instantly. 100% Free — No registration required.
background: linear-gradient(90deg, #3B82F6 0%, #9333EA 100%); Common Use Cases
Where and how to use CSS gradients in your projects
Hero Backgrounds
Create eye-catching hero sections with smooth color transitions. Gradients add depth and visual interest to landing pages.
Button Effects
Make buttons stand out with gradient backgrounds and hover effects. Create premium, modern-looking CTAs.
Text Gradients
Apply gradients to text for stunning typography effects. Perfect for headings, logos, and accent text.
Card Overlays
Add gradient overlays to images and cards for better text readability and visual depth.
How CSS Gradients Work
CSS gradients allow you to display smooth transitions between two or more specified colors. Unlike images, gradients are generated by the browser and scale perfectly at any resolution.
Types of Gradients
- Linear Gradient: Colors transition along a straight line. You control the direction with an angle or keywords.
- Radial Gradient: Colors radiate outward from a central point. You can create circular or elliptical shapes.
- Conic Gradient: Colors rotate around a center point (like a color wheel). Great for pie charts and angular effects.
Color Stops
Each color in a gradient is called a 'color stop'. You can specify where each color should appear as a percentage (0% to 100%) or fixed length.
CSS Gradient Syntax & Examples
Copy-paste ready code examples for different gradient types
/* Basic horizontal gradient */
.element {
background: linear-gradient(90deg, #3B82F6, #9333EA);
}
/* Diagonal gradient */
.element {
background: linear-gradient(45deg, #ff6b6b, #feca57);
}
/* Multiple color stops */
.rainbow {
background: linear-gradient(
90deg,
#ff0000 0%,
#ff7f00 17%,
#ffff00 33%,
#00ff00 50%,
#0000ff 67%,
#4b0082 83%,
#9400d3 100%
);
}/* Circle from center */
.element {
background: radial-gradient(circle, #3B82F6, #1E3A8A);
}
/* Ellipse at specific position */
.element {
background: radial-gradient(
ellipse at top left,
#ffecd2 0%,
#fcb69f 100%
);
}
/* Multiple layers for depth */
.glassmorphism {
background: radial-gradient(
circle at 30% 30%,
rgba(255,255,255,0.3) 0%,
transparent 70%
);
}Frequently Asked Questions
What's the difference between linear and radial gradients?
Linear gradients create a smooth color transition along a straight line. Radial gradients create a color transition that radiates outward from a central point.
How do I create a diagonal gradient?
Use an angle value in linear-gradient function. For example, linear-gradient(45deg, #ff0000, #0000ff) creates a gradient from bottom-left to top-right.
Can I apply gradients to text?
Yes! Set the gradient as background, then use background-clip: text and -webkit-text-fill-color: transparent to make the gradient visible through the text.
Are CSS gradients supported in all browsers?
CSS gradients have excellent browser support (98%+ globally). All modern browsers support gradients without prefixes. Only IE9 and below require fallbacks.