Open almost any modern website and you will see them: hero sections that fade from deep blue to purple, buttons that glow with a smooth color shift, cards with a soft radial highlight behind the headline. Most of those effects are not images at all. They are CSS gradients, smooth transitions between colors that the browser paints on the fly, with zero image files to download. If you want to skip the syntax entirely, you can design one visually with our CSS gradient generator and copy the finished code.
Gradients are one of the best deals in front-end development. They look rich, they scale to any screen size without losing quality, and they cost almost nothing in performance. In this guide we will cover linear, radial, and conic gradients, plus repeating patterns and practical recipes you can copy straight into your stylesheet.
A gradient is not a color; it is an image that CSS generates from color instructions. You define a starting color, an ending color, and optionally the points in between, and the browser fills the element with a smooth blend. Because it is generated as code, a gradient is infinitely scalable, resolution-independent, and typically a fraction of the size of an equivalent image file.
You apply gradients through the background-image property (or the background shorthand) using one of three functions: linear-gradient(), radial-gradient(), and conic-gradient(). Every modern browser supports all three, so there is no compatibility dance to worry about.
Linear gradients blend colors along a straight line. The simplest version fades from one color to another, top to bottom:
.hero {
background-image: linear-gradient(#3b82f6, #8b5cf6);
}
By default the blend runs top to bottom, but you can aim it anywhere. Use direction keywords or an angle:
/* bottom to top */
background-image: linear-gradient(to top, #3b82f6, #8b5cf6);
/* diagonal */
background-image: linear-gradient(to bottom right, #3b82f6, #8b5cf6);
/* precise angle, 0deg points up, 90deg points right */
background-image: linear-gradient(135deg, #3b82f6, #8b5cf6);
You are not limited to two colors, and you can control exactly where each color sits with color stops:
background-image: linear-gradient(
to right,
#3b82f6 0%,
#8b5cf6 50%,
#ec4899 100%
);
Color stops are percentages (or pixel values) along the gradient line. Place two stops at the same position and you get a hard edge instead of a blend, which is a neat trick for two-tone backgrounds without any extra markup.
Radial gradients blend outward from a center point, like light falling on a surface. They are perfect for soft glows, vignettes, and spotlight effects behind content:
.card {
background-image: radial-gradient(circle, #fef3c7, #f59e0b);
}
You can shape the gradient as a circle or an ellipse, size it with keywords like closest-side or farthest-corner, and move the center anywhere you like:
background-image: radial-gradient(
circle at 30% 20%,
#fef3c7,
#f59e0b 70%
);
This one starts its glow near the top-left of the element and fades to the edge color by the 70 percent mark. Radial gradients with a light center and a darker edge are an easy way to add depth to cards and modals without shadows.
Conic gradients rotate colors around a central point, like a pie chart or a color wheel. They are the newest of the three and the least used, which is a shame, because they do things the others cannot:
/* a simple pie chart, no SVG needed */
.chart {
background-image: conic-gradient(
#3b82f6 0% 40%,
#8b5cf6 40% 70%,
#ec4899 70% 100%
);
border-radius: 50%;
}
Hard stops at the same angle create the clean segments of the chart. Conic gradients are also the secret behind popular effects like rotating rainbow borders and color-wheel pickers, and combined with CSS animation they can produce a slowly spinning glow behind a button.
Add the word repeating to any gradient function and the pattern tiles itself to fill the element. This is the easiest way to draw stripes, checkerboards, and subtle textures in pure CSS:
/* diagonal pinstripes */
.stripes {
background-image: repeating-linear-gradient(
45deg,
#f3f4f6 0 10px,
#e5e7eb 10px 20px
);
}
The pattern repeats every 20 pixels, forever, at zero extra cost. Repeating radial gradients make polka dots and ripple rings; repeating conic gradients make starbursts. If you can describe the pattern with stops, you can tile it.
The syntax is the easy part. Choosing colors that look intentional is where most gradient attempts fall apart. A few rules that reliably work:
transparent lets a gradient sit gracefully over photos or patterns. You will need RGBA values for that, and a hex to RGB converter turns any hex code into the rgba() format in one step.When you are hunting for the right pair, open a color picker and sample colors from designs you admire. There is no shame in borrowing a palette that already works; professionals do it constantly.
Here is where gradients quietly beat images. A photographic hero background might weigh 200 KB and cost an extra HTTP request. The equivalent gradient is a single line of CSS, a few dozen bytes, already inside your stylesheet, painted by the GPU at native resolution on every device. There is no compression artifacting, no blurry upscale on retina screens, and no layout shift while the file downloads.
That matters for real metrics. Heavy hero images are a common cause of slow Largest Contentful Paint, one of Google's Core Web Vitals. Replacing a decorative background image with a gradient removes the download entirely. It is the same philosophy behind proper image SEO optimization: serve the lightest possible asset for the job, and for decorative blends, the lightest asset is no image at all.
Gradients are not a replacement for photography or product shots, of course. But anywhere the image is just color and mood, code wins.
A few ready-made patterns that show up on real sites every day:
/* soft hero background */
.hero {
background-image: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%);
color: #ffffff;
}
/* glowing button */
.btn-glow {
background-image: linear-gradient(to right, #f59e0b, #ef4444);
border: none;
color: #ffffff;
padding: 12px 28px;
border-radius: 999px;
}
/* gradient text */
.gradient-text {
background-image: linear-gradient(to right, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* subtle card sheen */
.card {
background-image: radial-gradient(
circle at 50% 0%,
rgba(255, 255, 255, 0.15),
transparent 60%
);
}
The gradient text trick is worth a special mention: clip the gradient to the text shape and make the text itself transparent, and your headlines wear the blend. Use it sparingly, on short headings, for maximum effect.
Gradients turn a flat design into a rich one with a few lines of code and no performance cost. Learn the three functions, get comfortable with color stops, and keep transparency in your back pocket for overlays. Once the syntax clicks, you will start seeing places to use gradients everywhere: buttons, heroes, dividers, badges, and backgrounds that used to need a designer and a PNG export.
Want to skip the syntax and just see it? Build your blend visually with our free CSS gradient generator, then copy the finished code straight into your stylesheet.
A CSS gradient is a smooth transition between two or more colors that the browser generates as code, rather than loading as an image file. You create one with the linear-gradient(), radial-gradient(), or conic-gradient() function, and it can be used anywhere a background image is allowed.
Yes. Linear, radial, and conic gradients are supported by all modern browsers, including Chrome, Firefox, Safari, and Edge. Conic gradients arrived last but have been universally supported for years, so you can use all three without fallbacks or prefixes in practice.
For decorative color blends, absolutely. A gradient is a few dozen bytes of CSS with no extra HTTP request, while even an optimized background image costs kilobytes and a network round trip. Gradients also scale perfectly to any screen resolution with no quality loss.
Apply a linear gradient as the background, then set background-clip: text (with the -webkit- prefix for broader support) and color: transparent. The gradient shows through the shape of the letters. It works best on short, bold headlines rather than body text.
Not directly, because browsers cannot interpolate between two gradient definitions in a transition. The common workaround is to animate the background-position of an oversized gradient, or to cross-fade between two layered gradients by animating opacity. Both techniques produce smooth motion with a little extra setup.
