The linear-gradient() function paints a smooth transition between two or more colors along a straight line. It produces an image, so you use it anywhere CSS accepts an image: background-image, border-image, mask-image and list-style-image.
.hero {
background-image: linear-gradient(#6d28d9, #fb7185);
}That one line gives you a violet-to-coral fade from top to bottom. Everything else in the function controls direction and how the colors blend.
Linear gradient CSS syntax
linear-gradient( [ <angle> | to <side-or-corner> ]? [ in <color-space> ]?, <color-stop-list> )| Part | Required | Example |
|---|---|---|
| Direction | No. Defaults to to bottom (180deg) | to right, 45deg, 0.25turn |
| Color interpolation | No | in oklch |
| Color stops | At least two | red, blue 40%, gold 10px 30px |
Direction: what 0deg and 90deg mean
Angles in CSS gradients start at the top and run clockwise. People often expect math-style angles that start on the right and run counterclockwise, which is why searches for “css linear-gradient 0deg direction” stay so common.
| Value | Gradient runs toward | Same as |
|---|---|---|
0deg | Top | to top |
90deg | Right | to right |
180deg | Bottom (default) | to bottom |
270deg | Left | to left |
45deg | Top right, at a fixed 45° angle | Not the same as to top right |
The last row trips people up. to top right points the gradient line so that the corner colors land in the corners of the box, whatever its proportions. On a wide banner that line ends up much flatter than 45°. Use the keyword when you want corner-to-corner coverage, and an angle when you want a consistent slant across boxes of different sizes.
Color stops and positions
Each color stop can take one or two positions, in percentages or lengths.
/* Even spread */
background-image: linear-gradient(90deg, #22d3ee, #6366f1, #ec4899);
/* Custom positions */
background-image: linear-gradient(90deg, #22d3ee 0%, #6366f1 70%, #ec4899 100%);
/* Two positions on one stop: a solid band from 30% to 60% */
background-image: linear-gradient(90deg, #22d3ee, #6366f1 30% 60%, #ec4899);Hard stops for stripes
Give two neighbouring stops the same position and the blend disappears. You get a sharp edge.
.flag {
background-image: linear-gradient(
to bottom,
#0057b7 0 50%,
#ffd700 50% 100%
);
}Color hints
A bare percentage between two colors moves the midpoint of the blend.
/* The halfway mix sits at 20% instead of 50% */
background-image: linear-gradient(90deg, black, 20%, white);Background linear gradient vs background-color
A gradient is an image. background-color: linear-gradient(...) does nothing, and the browser drops the whole declaration. Use background-image or the background shorthand:
.card {
background-color: #6d28d9; /* fallback */
background-image: linear-gradient(135deg, #6d28d9, #db2777);
}Keep the solid background-color as a fallback for contexts that don’t render gradients, such as some email clients.
Repeating linear gradient
repeating-linear-gradient() tiles the stop pattern until it fills the box. It’s the simplest way to draw stripes, progress bars and warning tape.
.caution {
background-image: repeating-linear-gradient(
45deg,
#facc15 0 12px,
#111827 12px 24px
);
}Smoother blends with color interpolation
By default, browsers blend gradient colors in the sRGB space. Blue to yellow in sRGB passes through a muddy gray. Modern browsers let you choose a different color space:
background-image: linear-gradient(in oklch 90deg, #2563eb, #facc15);in oklch and in oklab keep the midpoint bright and saturated. Chrome, Edge, Safari and Firefox all support this syntax in current versions.
Layering gradients
background-image accepts a comma-separated list. The first layer sits on top.
.photo-card {
background-image:
linear-gradient(to top, rgb(0 0 0 / 0.7), transparent 60%),
url("photo.jpeg");
background-size: cover;
}That pattern darkens the bottom of a photo so white caption text stays readable. You can mix linear gradients with a CSS radial gradient for spotlight effects and glows.
-moz-linear-gradient and other prefixes
You’ll still find -webkit-linear-gradient, -moz-linear-gradient and -o-linear-gradient in old stylesheets. Browsers dropped the need for them around 2012 to 2013. Two reasons to remove them today:
- The old syntax runs in the opposite direction. Prefixed versions took a starting side (
top), while the standard takes a destination (to bottom). Copying values between them flips your gradient. - Validators flag them. The W3C CSS validator reports vendor extensions as warnings or errors, which explains the “-moz-linear-gradient css validation error” message you may have seen.
Write the unprefixed linear-gradient() and let a tool like Autoprefixer handle any legacy targets.
Linear gradient in email
Email support is patchy. Apple Mail and many webmail clients render CSS gradients. Outlook for Windows desktop, which uses the Word rendering engine, ignores them. Always set a solid background-color (and the bgcolor attribute on table cells) so the email still looks right when the gradient fails.
Practical examples
/* Subtle page background */
body {
background-image: linear-gradient(180deg, #f8fafc, #e2e8f0);
min-height: 100vh;
}
/* Gradient button */
.btn {
background-image: linear-gradient(90deg, #f97316, #ec4899);
color: white;
}
.btn:hover {
background-image: linear-gradient(90deg, #ea580c, #db2777);
}
/* Fade-out at the end of a scrolling list */
.list::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 48px;
background-image: linear-gradient(to bottom, transparent, white);
pointer-events: none;
}Want the same colors around the edge of a box instead of filling it? See how to build a gradient border CSS effect that keeps rounded corners. For circular sweeps and pie charts, head back to the Conic.css generator.
FAQ
What is the default direction of a CSS linear gradient?
Top to bottom, which equals to bottom or 180deg.
Why does my linear gradient not show?
The most common causes are using background-color instead of background-image, a typo in a color value, or an element with no height.
Can I animate a linear gradient?
Browsers can’t transition between two gradient images directly. Animate background-position on an oversized gradient, or register custom properties with @property and animate the colors or angle.
How do I make a transparent gradient?
Use transparent or colors with an alpha channel, such as rgb(0 0 0 / 0). Modern browsers blend toward transparent without the gray tint older browsers produced.
What’s the difference between linear-gradient and radial-gradient?
A linear gradient changes color along a straight line. A radial gradient spreads outward from a center point in a circle or ellipse.