Gradients: Conic, Repeating & Layered
Go past two-stop linears — build pie charts, stripes, checkerboards and soft mesh backgrounds with pure CSS.
Gradients are generated images, and once you see them that way you realize you can stack them, repeat them, and steer them with hard color stops to draw real shapes — no image files, infinitely scalable.
Hard stops make shapes, not blends
Put two color stops at the same position and the transition becomes a crisp edge. That turns a gradient into stripes or a pie slice:
/* A two-tone split, no blur */
background: linear-gradient(90deg, #2965f1 50%, #7c3aed 50%);conic-gradient() — color swept around a center
Perfect for pie charts and color wheels: conic-gradient(#2965f1 0 40%, #7c3aed 40% 100%) draws a 40% slice.
repeating gradients — patterns for free
repeating-linear-gradient tiles a gradient to make stripes; combine two repeating gradients and you get a checkerboard.
Stack them
background accepts a comma-separated list of layers, front to back. Layer a few soft radial gradients and you've got a modern “mesh” background with zero images.
Example
When to use it
- A developer uses a conic-gradient to draw a pie chart slice showing task completion percentage in pure CSS.
- A designer uses repeating-linear-gradient to create a candy-stripe background pattern on a loading skeleton without images.
- A developer layers a radial-gradient highlight over a linear-gradient background to create a glossy button appearance.
More examples
Conic gradient pie chart
Creates a pie chart segment using conic-gradient with hard color stops at the percentage boundary.
.pie {
width: 120px;
height: 120px;
border-radius: 50%;
/* 65% filled, 35% empty */
background: conic-gradient(
#2965f1 0% 65%,
#eee 65% 100%
);
}Repeating gradient stripe pattern
Uses repeating-linear-gradient to build a diagonal candy-stripe pattern for skeleton loading placeholders.
.skeleton {
background: repeating-linear-gradient(
-45deg,
#e0e0e0 0px,
#e0e0e0 10px,
#f5f5f5 10px,
#f5f5f5 20px
);
animation: shimmer 1.5s ease-in-out infinite;
}Layered gradient for depth
Layers a radial highlight over a linear gradient to simulate a glossy light reflection on the button surface.
.btn-glass {
background:
radial-gradient(ellipse at top, rgba(255,255,255,0.3) 0%, transparent 60%),
linear-gradient(to bottom, #3f7fff, #2965f1);
color: #fff;
padding: 10px 24px;
border: none;
border-radius: 6px;
}
Discussion