CSS gradients are one of the most powerful visual tools in a web developer's toolkit. They create smooth transitions between colors without the need for images, reducing page load times and providing infinite customization. This complete CSS gradient guide covers everything from basic linear gradients to advanced techniques like gradient text, animated gradients, and creative patterns.
Create gradients visually with our CSS Gradient Generator →
Linear Gradients
Linear gradients transition colors along a straight line. They're the most commonly used gradient type.
Basic Syntax
/* Default: top to bottom */
background: linear-gradient(#3b82f6, #8b5cf6);
/* With direction */
background: linear-gradient(to right, #3b82f6, #8b5cf6);
/* With angle */
background: linear-gradient(45deg, #3b82f6, #8b5cf6);
/* Multiple color stops */
background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6);
/* Color stops with positions */
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);Direction Keywords
background: linear-gradient(to top, ...); /* 0deg */
background: linear-gradient(to right, ...); /* 90deg */
background: linear-gradient(to bottom, ...); /* 180deg - default */
background: linear-gradient(to left, ...); /* 270deg */
background: linear-gradient(to top right, ...); /* diagonal */
background: linear-gradient(to bottom left, ...); /* diagonal */Hard Color Stops (Sharp Transitions)
/* Sharp 50/50 split */
background: linear-gradient(90deg, #3b82f6 50%, #ef4444 50%);
/* Three equal sections */
background: linear-gradient(90deg,
#3b82f6 33.3%, #22c55e 33.3%,
#22c55e 66.6%, #ef4444 66.6%
);Radial Gradients
Radial gradients radiate from a center point outward in a circular or elliptical shape.
/* Default: ellipse at center */
background: radial-gradient(#3b82f6, #1e1b4b);
/* Circle shape */
background: radial-gradient(circle, #3b82f6, #1e1b4b);
/* Positioned center */
background: radial-gradient(circle at top left, #3b82f6, #1e1b4b);
background: radial-gradient(circle at 25% 75%, #3b82f6, #1e1b4b);
/* Sized circle */
background: radial-gradient(circle 200px at center, #3b82f6, transparent);
/* Size keywords */
background: radial-gradient(closest-side, #3b82f6, #1e1b4b);
background: radial-gradient(farthest-corner, #3b82f6, #1e1b4b);
/* Spotlight effect */
background: radial-gradient(circle 300px at 50% 30%,
rgba(59, 130, 246, 0.3), transparent
);Conic Gradients
Conic gradients transition colors around a center point, like a color wheel. They're perfect for pie charts and decorative elements.
/* Basic color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
/* Pie chart */
background: conic-gradient(
#3b82f6 0deg 120deg, /* 33% */
#22c55e 120deg 210deg, /* 25% */
#f59e0b 210deg 300deg, /* 25% */
#ef4444 300deg 360deg /* 17% */
);
/* Starting angle and position */
background: conic-gradient(from 45deg at 50% 50%, #3b82f6, #8b5cf6, #3b82f6);
/* Donut chart (combine with radial) */
background:
radial-gradient(circle 60px, var(--bg-primary) 99%, transparent),
conic-gradient(#3b82f6 0% 40%, #22c55e 40% 70%, #ef4444 70% 100%);
border-radius: 50%;Repeating Gradients
Repeating gradients tile the gradient pattern to fill the entire element. Great for creating stripes and patterns.
/* Diagonal stripes */
background: repeating-linear-gradient(
45deg,
#3b82f6, #3b82f6 10px,
transparent 10px, transparent 20px
);
/* Horizontal stripes */
background: repeating-linear-gradient(
0deg,
#1e1b4b, #1e1b4b 2px,
transparent 2px, transparent 20px
);
/* Repeating radial */
background: repeating-radial-gradient(
circle, #3b82f6, #3b82f6 5px,
transparent 5px, transparent 15px
);
/* Repeating conic (sunburst) */
background: repeating-conic-gradient(
#3b82f6 0deg 10deg, transparent 10deg 20deg
);Multiple & Layered Gradients
You can stack multiple gradients on a single element by comma-separating them. The first gradient is on top.
/* Spotlight overlay on gradient */
background:
radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1), transparent 50%),
linear-gradient(135deg, #0f172a, #1e1b4b);
/* Cross pattern */
background:
linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%),
linear-gradient(0deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%);
background-size: 40px 40px;Gradient Text Effects
Apply gradients to text using background-clip for eye-catching headings and hero sections.
/* Gradient text effect */
.gradient-text {
background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; /* fallback */
}
/* Animated gradient text (using @property) */
@property --gradient-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.animated-gradient-text {
background: linear-gradient(var(--gradient-angle), #3b82f6, #ec4899, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: rotate-gradient 3s linear infinite;
}
@keyframes rotate-gradient {
to { --gradient-angle: 360deg; }
}Gradient Borders
CSS doesn't support gradient borders directly, but there are clever workarounds.
/* Method 1: border-image (no border-radius support) */
.gradient-border-1 {
border: 3px solid;
border-image: linear-gradient(135deg, #3b82f6, #ec4899) 1;
}
/* Method 2: pseudo-element (supports border-radius) */
.gradient-border-2 {
position: relative;
border-radius: 12px;
padding: 3px; /* border width */
background: linear-gradient(135deg, #3b82f6, #ec4899);
}
.gradient-border-2::before {
content: '';
position: absolute;
inset: 3px; /* same as padding */
background: var(--bg-card); /* inner background */
border-radius: 9px; /* outer radius minus border width */
}
.gradient-border-2 > * { position: relative; }
/* Method 3: outline + mask (modern browsers) */
.gradient-border-3 {
background:
linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
linear-gradient(135deg, #3b82f6, #ec4899) border-box;
border: 3px solid transparent;
border-radius: 12px;
}Creative Gradient Patterns
Combine repeating gradients to create complex patterns without images.
/* Checkerboard */
background:
conic-gradient(#1e293b 90deg, transparent 90deg 180deg,
#1e293b 180deg 270deg, transparent 270deg) 0 0 / 40px 40px;
/* Dots */
background:
radial-gradient(circle 3px, #3b82f6 99%, transparent) 0 0 / 20px 20px;
/* Carbon fiber */
background:
radial-gradient(#333 15%, transparent 16%),
radial-gradient(#333 15%, transparent 16%);
background-size: 8px 8px;
background-position: 0 0, 4px 4px;
background-color: #222;Performance & Browser Support
Gradients are rendered by the browser's GPU and are generally very performant. However, there are some things to keep in mind.
- GPU-rendered: Gradients are composited by the GPU, making them faster than equivalent images.
- Zero HTTP requests: Unlike background images, gradients add no network overhead.
- Retina-ready: Gradients scale perfectly at any resolution without becoming pixelated.
- Browser support: Linear and radial gradients have 99%+ support. Conic gradients work in all modern browsers (Chrome, Firefox, Safari, Edge). Use
@supportsfor progressive enhancement if targeting older browsers. - Avoid: Extremely complex gradients with 20+ color stops on elements that reflow frequently.
Frequently Asked Questions
Can I animate CSS gradients?
CSS gradients cannot be directly animated with CSS transitions because they are background-images, not simple color values. However, you can animate them using: (1) CSS @property to register custom properties and animate them, (2) changing background-position on a larger-than-element gradient, or (3) using CSS Houdini for smooth gradient animations. The @property approach works in Chrome, Edge, and Safari.
What is the difference between linear-gradient and radial-gradient?
Linear gradients transition colors along a straight line (top to bottom, left to right, or at any angle). Radial gradients transition from a center point outward in a circle or ellipse. Linear is best for backgrounds and overlays; radial is great for spotlights, orbs, and circular effects.
How do I create a gradient border in CSS?
The most reliable method uses border-image with a linear-gradient or a pseudo-element with a gradient background behind a solid background element. The border-image approach works for simple cases, while the pseudo-element method gives you more control over border-radius.
Do CSS gradients affect page performance?
CSS gradients are GPU-rendered and highly performant — much better than equivalent gradient images. They add zero HTTP requests and scale perfectly at any resolution. Very complex gradients with many color stops (10+) or large repeating patterns may cause minor rendering overhead, but this is rarely noticeable.
How do I make a smooth gradient without color banding?
Color banding occurs when there aren't enough color steps between two very different colors. To fix it: (1) add intermediate color stops between the main colors, (2) use longer gradient distances, (3) add a slight noise overlay using a tiny SVG texture, or (4) use wider color transitions rather than hard stops.
CSS gradients are a versatile and performant way to add visual depth to your web projects. Experiment with our tool to create the perfect gradient.
Design your gradient visually with our CSS Gradient Generator →