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 at runtime, which means they scale perfectly at any resolution and don't require additional HTTP requests.
Types of Gradients
- Linear Gradient: Colors transition along a straight line. You control the direction with an angle (e.g., 90deg for left-to-right) or keywords (to right, to bottom-right).
- Radial Gradient: Colors radiate outward from a central point. You can create circular or elliptical shapes with customizable center positions.
- 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. Without explicit positions, colors are distributed evenly.
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%
);
}/* Gradient text effect */
.gradient-text {
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Animated gradient text */
.animated-gradient {
background: linear-gradient(270deg, #ff6b6b, #4ecdc4, #45b7d1);
background-size: 600% 600%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient 3s ease infinite;
}
@keyframes gradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}<!-- Basic gradient -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600">
</div>
<!-- Three color stops -->
<div class="bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500">
</div>
<!-- Gradient text -->
<h1 class="bg-gradient-to-r from-purple-400 to-pink-600
bg-clip-text text-transparent">
Gradient Text
</h1>
<!-- Button with gradient -->
<button class="bg-gradient-to-r from-cyan-500 to-blue-500
hover:from-cyan-600 hover:to-blue-600">
Click Me
</button>Frequently Asked Questions
What's the difference between linear and radial gradients?
Linear gradients create a smooth color transition along a straight line (horizontal, vertical, or diagonal). Radial gradients create a color transition that radiates outward from a central point in a circular or elliptical pattern.
How do I create a diagonal gradient?
Use an angle value in the linear-gradient function. For example, linear-gradient(45deg, #ff0000, #0000ff) creates a gradient from bottom-left to top-right. Common angles: 45deg, 135deg, 225deg, 315deg.
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 including Chrome, Firefox, Safari, and Edge support gradients without prefixes. Only IE9 and below require fallbacks.
How many color stops can I use?
There's no hard limit on color stops. You can use as many as needed, though 2-5 stops are most common for smooth transitions. More stops enable complex effects like rainbow gradients or striped patterns.
Can I animate CSS gradients?
You can't directly animate gradient colors, but you can animate background-position or background-size to create smooth gradient animations. Use a larger background-size and animate the position.