CSS gradients let you create smooth transitions between colors without reaching for image files. They render at any resolution, scale perfectly, and cost zero network requests. Once you understand the syntax, gradients become one of the most versatile tools in your CSS toolkit.
This guide walks through all three gradient types — linear, radial, and conic — with practical code you can use immediately.
Linear Gradients
Linear gradients transition colors along a straight line. The simplest form takes two colors and blends them top to bottom:
.element {
background: linear-gradient(#3498db, #2ecc71);
}Controlling Direction
By default, linear gradients flow from top to bottom. You can change direction with keywords or angles:
/* Keyword directions */
background: linear-gradient(to right, #3498db, #2ecc71);
background: linear-gradient(to bottom right, #3498db, #2ecc71);
/* Angle-based directions */
background: linear-gradient(45deg, #3498db, #2ecc71);
background: linear-gradient(180deg, #3498db, #2ecc71); /* same as default */Angles start from the top (0deg = upward, 90deg = rightward, 180deg = downward). This trips people up — 0deg points up, not right.
Color Stops
Color stops let you control where each color starts and ends. Without explicit stops, colors are distributed evenly. With stops, you get fine-grained control:
/* Color at specific positions */
background: linear-gradient(to right, #e74c3c 0%, #f39c12 30%, #2ecc71 100%);
/* Hard stops create stripes */
background: linear-gradient(
to right,
#e74c3c 0%, #e74c3c 33%,
#f39c12 33%, #f39c12 66%,
#2ecc71 66%, #2ecc71 100%
);The hard-stop technique — where one color ends at the exact same position another begins — is how you create stripes, progress bars, and flag effects with pure CSS.
Repeating Linear Gradients
When you want a pattern that tiles, repeating-linear-gradient is your friend:
/* Diagonal stripes */
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);This creates a seamless diagonal stripe pattern. The key is making sure the last color stop of one cycle matches the first color of the next.
Radial Gradients
Radial gradients radiate outward from a center point. They default to an ellipse that matches the element’s aspect ratio:
.element {
background: radial-gradient(#3498db, #2c3e50);
}Shape and Size
You can control the shape (circle or ellipse) and the size of the gradient:
/* Perfect circle */
background: radial-gradient(circle, #3498db, #2c3e50);
/* Sized circle */
background: radial-gradient(circle 100px, #3498db, #2c3e50);
/* Size keywords */
background: radial-gradient(circle closest-side, #3498db, #2c3e50);
background: radial-gradient(circle farthest-corner, #3498db, #2c3e50);The four size keywords are: closest-side, closest-corner, farthest-side, and farthest-corner (default). Each determines where the gradient’s edge reaches relative to the element’s box.
Positioning
Move the gradient’s center with the at keyword:
/* Top-left origin */
background: radial-gradient(circle at top left, #3498db, #2c3e50);
/* Specific coordinates */
background: radial-gradient(circle at 30% 70%, #3498db, #2c3e50);Combining position with multiple color stops is how you create spotlight effects, glowing orbs, and other visual highlights:
/* Spotlight effect */
background: radial-gradient(
circle at 50% 50%,
rgba(255, 255, 255, 0.3) 0%,
transparent 60%
),
#2c3e50;Conic Gradients
Conic gradients are the newest type, rotating colors around a center point like a color wheel. They are perfect for pie charts, circular progress indicators, and decorative patterns:
.element {
background: conic-gradient(#e74c3c, #f39c12, #2ecc71, #3498db, #e74c3c);
border-radius: 50%;
}Creating Pie Charts with CSS
One of the most practical uses of conic gradients is building simple pie charts without JavaScript:
.pie-chart {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(
#e74c3c 0% 35%, /* 35% slice */
#3498db 35% 60%, /* 25% slice */
#2ecc71 60% 85%, /* 25% slice */
#f39c12 85% 100% /* 15% slice */
);
}Hard color stops (where one percentage immediately follows another) create sharp divisions between slices.
Repeating Conic Gradients
Repeating conic gradients produce starburst and checkerboard patterns:
/* Starburst */
background: repeating-conic-gradient(
#333 0deg 10deg,
#666 10deg 20deg
);
/* Checkerboard */
background: conic-gradient(
#ccc 90deg, #fff 90deg 180deg,
#ccc 180deg 270deg, #fff 270deg
);
background-size: 40px 40px;Layering Multiple Gradients
You can stack gradients using comma-separated values. Later gradients sit beneath earlier ones, so use transparent and rgba() to let lower layers show through:
.layered {
background:
linear-gradient(45deg, rgba(255,0,0,0.3), transparent),
linear-gradient(-45deg, rgba(0,0,255,0.3), transparent),
radial-gradient(circle, #fff, #eee);
}This technique creates complex, visually rich backgrounds that remain resolution-independent and fast to render.
Practical Gradient Patterns
Text Gradients
Apply gradients to text using background-clip:
.gradient-text {
background: linear-gradient(90deg, #e74c3c, #3498db);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}Smooth Gradient Borders
.gradient-border {
border: 3px solid transparent;
background-image: linear-gradient(white, white),
linear-gradient(90deg, #e74c3c, #3498db);
background-origin: border-box;
background-clip: padding-box, border-box;
}Animated Gradients
CSS gradients cannot be directly animated with transitions, but you can animate the background-position of an oversized gradient:
.animated-gradient {
background: linear-gradient(270deg, #e74c3c, #3498db, #2ecc71);
background-size: 300% 300%;
animation: gradient-shift 6s ease infinite;
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}Browser Support and Performance
All modern browsers support linear and radial gradients without prefixes. Conic gradients are supported in all evergreen browsers. For older browsers, always include a solid background-color fallback before the gradient declaration.
Performance-wise, gradients are rendered by the GPU and are generally very efficient. However, extremely complex gradients with many color stops or heavy layering can cause repaint overhead on lower-powered devices. Keep it simple where possible.
Building Gradients Quickly
Crafting gradient syntax by hand — especially for complex multi-stop gradients — gets tedious. Small typos in color values or stop percentages can throw off the entire effect, and it is hard to visualize what linear-gradient(135deg, #667eea 0%, #764ba2 100%) looks like without rendering it.
Our CSS Gradient Generator lets you visually build gradients with a live preview. Pick your gradient type, adjust color stops, tweak the angle or position, and copy the generated CSS directly into your project. It handles all the syntax details so you can focus on the visual result.
Wrapping Up
CSS gradients are far more powerful than most developers realize. Linear gradients cover the majority of use cases, radial gradients add depth and focus effects, and conic gradients open up charts and decorative patterns — all without a single image file. Start with simple two-color gradients, then layer complexity as you need it. The syntax is consistent across all three types, so once you master one, the others follow naturally.