Difficulty: Intermediate
CSS gradients let you display smooth transitions between two or more colors. They are generated as images by the browser, which means they can be used anywhere an image is accepted -- most commonly in background-image, but also in list-style-image, border-image, and other image-accepting properties. Gradients are resolution-independent (they scale perfectly to any size) and require no HTTP requests, making them a performance-friendly alternative to gradient image files.
Linear gradients create a color transition along a straight line. The direction is specified as an angle (e.g., 45deg) or a keyword (to right, to bottom left). Color stops define where each color appears along the gradient line. By default, colors are evenly distributed, but you can specify exact positions using percentages or length values. You can create hard color transitions (no blending) by placing two different color stops at the same position, which is useful for creating stripes and geometric patterns.
Radial gradients radiate outward from a center point in a circular or elliptical shape. The shape can be specified as circle or ellipse, and the size can be set using keywords (closest-side, farthest-corner, etc.) or explicit dimensions. The center position can be moved using the at keyword: radial-gradient(circle at top left, ...). Radial gradients are excellent for spotlight effects, glowing highlights, and decorative backgrounds.
Conic gradients create color transitions that sweep around a center point, like slices of a pie. The colors are distributed around the circumference rather than radiating outward. This makes conic gradients perfect for pie charts, color wheels, and circular progress indicators. The from keyword sets the starting angle: conic-gradient(from 90deg, ...) starts from the right instead of the top.
Repeating gradients (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient) tile the gradient pattern to fill the element. They are powerful for creating striped backgrounds, checkerboard patterns, and complex decorative designs without any images. The key is defining the color stops within a small range -- the browser repeats the pattern to fill the entire element.
/* Top to bottom (default direction) */
.gradient-basic {
background-image: linear-gradient(#3498db, #2c3e50);
}
/* Left to right */
.gradient-horizontal {
background-image: linear-gradient(to right, #e74c3c, #f39c12);
}
/* Diagonal */
.gradient-diagonal {
background-image: linear-gradient(45deg, #8e44ad, #3498db, #2ecc71);
}
/* Custom color stop positions */
.gradient-stops {
background-image: linear-gradient(
to right,
#e74c3c 0%,
#e74c3c 30%, /* solid red for first 30% */
#f39c12 30%, /* hard transition to orange */
#f39c12 100%
);
}
/* Transparent to color (overlay effect) */
.gradient-overlay {
background-image: linear-gradient(
to bottom,
transparent,
hsl(0 0% 0% / 0.8)
);
}Linear gradients blend colors along a line. The direction can be keywords (to right, to bottom left) or angles (45deg, 180deg). Placing two color stops at the same position (30%) creates a hard edge. The transparent-to-black pattern is commonly used for text overlays on images.
/* Basic circular radial gradient */
.gradient-radial {
background-image: radial-gradient(circle, #3498db, #2c3e50);
}
/* Elliptical (default shape) */
.gradient-ellipse {
background-image: radial-gradient(ellipse, #e74c3c, #2c3e50);
}
/* Custom position */
.gradient-positioned {
background-image: radial-gradient(
circle at 25% 25%,
#f39c12,
#e74c3c,
#8e44ad
);
}
/* Spotlight / glow effect */
.spotlight {
background-color: #1a1a2e;
background-image: radial-gradient(
circle at 50% 30%,
hsl(220 80% 60% / 0.3),
transparent 60%
);
}
/* Sized gradient */
.gradient-sized {
background-image: radial-gradient(
circle 100px at center,
#3498db,
transparent
);
}Radial gradients expand from a center point outward. Use 'circle' for circular gradients or 'ellipse' (default) to match the element's aspect ratio. The 'at' keyword positions the center. Combining with transparent creates spotlight and glow effects.
/* Basic conic gradient (color wheel) */
.color-wheel {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: conic-gradient(
red, yellow, lime, aqua, blue, magenta, red
);
}
/* Pie chart with hard stops */
.pie-chart {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: conic-gradient(
#3498db 0% 40%, /* 40% blue */
#e74c3c 40% 70%, /* 30% red */
#2ecc71 70% 100% /* 30% green */
);
}
/* Progress ring */
.progress-ring {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: conic-gradient(
from 0deg,
#3498db 0% 75%, /* 75% complete */
#e0e0e0 75% 100% /* remaining */
);
}Conic gradients sweep colors around a center point like clock hands. Hard color stops (same position for end and start) create pie-chart segments. The 'from' keyword sets the starting angle. Perfect for charts, progress indicators, and decorative elements.
/* Diagonal stripes */
.stripes {
background-image: repeating-linear-gradient(
45deg,
#3498db,
#3498db 10px,
#2980b9 10px,
#2980b9 20px
);
}
/* Horizontal lines (notebook paper) */
.lined-paper {
background-color: white;
background-image: repeating-linear-gradient(
to bottom,
transparent,
transparent 31px,
#e0e0e0 31px,
#e0e0e0 32px
);
}
/* Concentric circles */
.target {
background-image: repeating-radial-gradient(
circle,
#e74c3c,
#e74c3c 10px,
white 10px,
white 20px
);
}
/* Multiple gradients layered */
.grid-pattern {
background-color: white;
background-image:
linear-gradient(to right, #e0e0e0 1px, transparent 1px),
linear-gradient(to bottom, #e0e0e0 1px, transparent 1px);
background-size: 20px 20px;
}Repeating gradients tile the pattern. Define color stops within a small range and the browser repeats the pattern. Multiple background-images can be layered (comma-separated) to create complex patterns like grids. background-size controls the tile size.
linear-gradient, radial-gradient, conic-gradient, Repeating Gradients, Color Stops, Gradient Direction