CSS Gradient Guide 2026: Every Type Explained
Last updated: 2026-07-17
Quick Answer
CSS gradients are smooth color transitions created in code instead of images, using linear-gradient, radial-gradient, or conic-gradient. They load fast, scale cleanly, and are easy to edit, which is why designers use them for backgrounds, buttons, and text effects. All three types work in every modern browser as of 2026.
Advertisement
CSS gradients let you create smooth color transitions in pure code, with no image file needed. There are three types, and by 2026 all of them work in every modern browser: linear-gradient for straight-line blends, radial-gradient for circular ones, and conic-gradient for colors that sweep around a point. Because they are code, gradients scale to any size at zero file weight and change with a single value. This guide covers each type with copy-paste examples, the popular gradient text trick, browser support, and performance, all backed by the official docs on MDN Web Docs.
What are CSS gradients and why use them?
A CSS gradient creates a smooth transition between two or more colors using pure CSS, with no image file required (W3C). That makes gradients infinitely scalable at zero file size, easy to modify by changing a single value, hardware-accelerated for smooth rendering, and responsive without any extra work.
You see them everywhere in modern web design: hero backgrounds, button hover effects, card surfaces, text fills, photo overlays, loading skeletons, and small decorative accents. Learning to write them by hand means you can produce any gradient effect without opening a design tool or exporting an image.
How do linear gradients work?
A linear gradient transitions colors along a straight line at an angle you choose. It is the most common type by far.
Basic syntax
Direction options
background: linear-gradient(to right, #7C3AED, #06B6D4);
background: linear-gradient(to bottom right, #7C3AED, #06B6D4);
/* Degree angles */
background: linear-gradient(90deg, #7C3AED, #06B6D4); /* left to right */
background: linear-gradient(135deg, #7C3AED, #06B6D4); /* diagonal */
Per MDN, when you leave out the direction a linear gradient runs top to bottom, and with angles, 90deg goes left to right while 0deg goes bottom to top, rotating clockwise.
Multiple color stops
background: linear-gradient(90deg,
#7C3AED 0%,
#06B6D4 50%,
#10B981 100%
);
/* Hard stop for a sharp edge */
background: linear-gradient(to right, #7C3AED 50%, #06B6D4 50%);
Color stops can sit at any percentage, so you can make uneven blends or create hard edges by placing two stops at the same position.
How do radial gradients work?
A radial gradient spreads colors outward from a center point in a circular or elliptical shape. As MDN describes it, the colors transition from the center of an ellipse outward in every direction.
background: radial-gradient(circle, #7C3AED, #1e1b4b);
/* Custom center position */
background: radial-gradient(circle at 30% 40%, #7C3AED, #1e1b4b);
/* With a size keyword */
background: radial-gradient(circle closest-side, #7C3AED, #1e1b4b);
Radial gradients suit spotlight effects, glowing backgrounds, and any composition where a soft burst of color from a point looks right. Moving the center with the "at" keyword lets you place off-center focal points.
What are conic gradients for?
A conic gradient rotates colors around a center point, like a color wheel or a pie chart. MDN puts it neatly: the colors transition as if spun around the center of a circle, starting at the top and going clockwise.
background: conic-gradient(from 45deg, #7C3AED, #06B6D4, #10B981, #7C3AED);
/* Pie chart style with hard stops */
background: conic-gradient(
#7C3AED 0deg 120deg,
#06B6D4 120deg 240deg,
#10B981 240deg 360deg
);
Conic gradients are great for pie charts using hard color stops at set degrees, color wheel visuals, and radial loading indicators. They are the newest of the three, but as covered below, support is now everywhere.
How do you make gradient text?
One of the most popular gradient tricks is applying a gradient to text. It takes three properties working together:
background: linear-gradient(90deg, #7C3AED, #06B6D4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent; /* fallback */
}
This clips the gradient to the shape of the text. All modern browsers support it, though Safari still wants the -webkit- prefix. Always keep a solid color fallback for anywhere the gradient cannot render.
Which gradient patterns are most useful?
Hero overlay on an image
background-image:
linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7)),
url('hero-image.jpg');
background-size: cover;
}
Subtle card background
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}
Button hover gradient
.btn:hover { background: linear-gradient(135deg, #7C3AED, #06B6D4); }
These three cover most day-to-day needs. If you want to see how gradients fit the wider palette conversation, our CSS color formats guide and the 2026 web design color trends are worth a read.
Do gradients work in every browser and perform well?
Support is excellent. Linear and radial gradients have been baseline features for over a decade. Conic gradients are the newest, but they are fully supported now too. According to Can I Use, conic-gradient works in Chrome 69 and up, Edge 79 and up, Firefox 83 and up, and Safari 12.1 and up, which covers every current desktop and mobile browser. For very old browsers, a solid color fallback is all you need.
On performance, gradients are hardware-accelerated and rendered natively, so they beat any image alternative on load. The one caution is animation. Gradients on elements that change constantly can cause repaints, so for animated elements prefer solid colors and animate opacity or transform instead of the gradient itself. Mesh gradients, which stack several radial gradients, look stunning but cost more to render, so test them on a low-end phone before using them in scroll animations.
What else do people ask?
What is the CSS syntax for a linear gradient?
The basic syntax is background: linear-gradient(direction, color1, color2). Direction can be a keyword like to right or to bottom, or a degree value like 90deg or 135deg. You can add multiple color stops, such as linear-gradient(90deg, #7C3AED 0%, #06B6D4 50%, #10B981 100%). When you leave out the direction, it defaults to top to bottom, which is 180deg.
How do I make a gradient background in CSS?
Use the background or background-image property with a gradient function. For example, background: linear-gradient(135deg, #7C3AED, #06B6D4) creates a purple to cyan gradient at 135 degrees. Use background-image instead of background when you also need to set background-size or background-position separately.
Can I animate a CSS gradient?
Not directly, because gradients are treated as images and cannot be transitioned. The common workaround is to animate background-position on an oversized gradient, or fade between pseudo-elements with different gradient backgrounds. Animating background-position on a doubled gradient is the smoothest and most performant approach.
Do conic gradients work in all browsers?
Yes, in every modern browser. According to Can I Use, conic-gradient is supported in Chrome 69 and up, Edge 79 and up, Firefox 83 and up, and Safari 12.1 and up, which covers all current desktop and mobile browsers. For very old browsers, provide a solid color fallback.
How many colors can a CSS gradient have?
There is no practical limit. You can add as many color stops as you like, each with an optional position, such as linear-gradient(90deg, red 0%, orange 25%, yellow 50%, green 75%, blue 100%). More stops give you finer control, though simple two or three color gradients usually look cleanest and perform best.
Sources: MDN Web Docs, Using CSS gradients (developer.mozilla.org/en-US/docs/Web/CSS/Guides/Images/Using_gradients). MDN Web Docs, conic-gradient() (developer.mozilla.org). Can I Use, CSS Conical Gradients (caniuse.com/css-conic-gradients).