Gradients
Create smooth color transitions without images.
Syntax
background-image: linear-gradient(to right, #2965f1, #5b8def);Gradients are generated images that blend between colors. They are set with background-image.
linear-gradient()— colors along a straight line.radial-gradient()— colors radiating from a center.conic-gradient()— colors rotated around a center.
Example
Loading editor…
Press Run to see the result.
When to use it
- A designer replaces a solid header background with a linear-gradient to add visual depth without requiring an image asset.
- A developer uses a conic-gradient to create a pie-chart-style progress indicator purely in CSS.
- A UI engineer applies a radial-gradient to a button's background so it appears to glow or have a light source from the center.
More examples
Linear gradient background
Creates a diagonal linear gradient from brand blue to near-black for a rich hero section background.
.hero {
background: linear-gradient(135deg, #2965f1 0%, #1a1a2e 100%);
color: #fff;
padding: 80px 24px;
}Radial gradient button glow
Uses radial-gradient centered on the button to simulate a soft light source from the middle.
.btn-glow {
background: radial-gradient(circle at center, #5c9aff 0%, #2965f1 60%);
color: #fff;
border: none;
padding: 10px 24px;
cursor: pointer;
}Multi-stop gradient stripe
Uses hard color stops to build a two-tone progress bar showing 60% completion without extra HTML elements.
.progress-bar {
background: linear-gradient(
to right,
#27ae60 0%,
#27ae60 60%,
#eee 60%,
#eee 100%
);
height: 12px;
border-radius: 6px;
}
Discussion