CSS Gradient Complete Guide: linear-gradient, radial-gradient & Advanced Techniques

CSS gradients are everywhere in modern UI — hero backgrounds, gradient buttons, text effects, progress bars, overlay fades. One line of CSS replaces what used to require an exported image file, an HTTP request, and a resolution-dependent PNG that looked blurry on high-DPI screens.

Today, the browser renders gradients natively: infinite resolution, zero additional network requests, fully animatable, and trivially responsive. Understanding how to wield them confidently is one of the highest-leverage CSS skills you can develop.

This guide covers all three types — linear-gradient, radial-gradient, and conic-gradient — from basic syntax through advanced techniques like gradient text, gradient borders, layered backgrounds, and repeating patterns. Every example is copy-ready.

What Is a CSS Gradient?

A CSS gradient is a value for the background (or background-image) property that instructs the browser to generate a smooth transition between two or more colors. Because the browser paints the gradient itself at render time, there is no image file to download and no resolution limit — gradients look perfectly sharp on every display, from standard monitors to 4K Retina screens.

There are three gradient functions, each suited to a different visual pattern:

All three work with the background shorthand or the background-image longhand. You can even stack multiple gradient values in a single declaration to layer effects — more on that in the Advanced section.

linear-gradient — Syntax and Examples

The linear gradient draws a straight color transition in any direction. Its full syntax is:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

The direction argument is optional (defaults to to bottom). You can use keyword directions or degree angles.

Direction Values

Angle degrees go clockwise from the top: 0deg is bottom-to-top, 90deg is left-to-right, 180deg is top-to-bottom.

Basic Examples

/* Two-color left to right */
background: linear-gradient(to right, #3B82F6, #8B5CF6);

/* Diagonal pink to orange */
background: linear-gradient(45deg, #EC4899, #F59E0B);

/* Three colors */
background: linear-gradient(to right, #06B6D4, #3B82F6, #8B5CF6);

Color Stops — Controlling Position

By default the browser distributes color stops evenly. Append a percentage (or pixel value) to each stop to take precise control over where each color begins and ends.

/* Blue holds 40% before transitioning */
background: linear-gradient(to right, #3B82F6 40%, #8B5CF6);

/* Hard stop — instant color change, no blend */
background: linear-gradient(to right, #3B82F6 50%, #8B5CF6 50%);

/* Striped pattern using hard stops */
background: linear-gradient(to right,
  #3B82F6 0%, #3B82F6 25%,
  #8B5CF6 25%, #8B5CF6 50%,
  #EC4899 50%, #EC4899 75%,
  #F59E0B 75%);

The hard stop technique (placing two stops at the same position) is how all CSS stripe and checkerboard patterns are built — no image required.

Transparency and Fades

Fading to transparent is one of the most practical gradient uses: overlaying cards, adding vignettes to images, or softening a section edge.

/* Fade to transparent */
background: linear-gradient(to bottom, #3B82F6, transparent);

/* Overlay on images (use on ::after pseudo-element) */
background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.8));

/* rgba for precise alpha — avoids gray-banding bug */
background: linear-gradient(to right, rgba(59,130,246,1), rgba(59,130,246,0));

Tip: Avoid the bare transparent keyword when fading from a saturated color — some browsers interpolate through gray. Instead, use rgba(R,G,B,0) with the same RGB values as your starting color but zero alpha. This keeps the hue consistent all the way to full transparency.

radial-gradient — Radial and Elliptical Gradients

A radial gradient radiates outward from a center point. This makes it ideal for spotlight effects, glows, badges, and any design element where light appears to emanate from a source.

The full syntax is:

background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

All arguments before the first comma are optional. The shape is either circle (equal horizontal and vertical radius) or ellipse (the default, which stretches to fit the element). The size keywords — closest-side, farthest-corner, etc. — control how far the gradient extends. The position follows at and accepts the same values as background-position.

Examples

/* White center fading to blue */
background: radial-gradient(circle, #ffffff, #3B82F6);

/* Soft background glow */
background: radial-gradient(ellipse at center, #DBEAFE 0%, transparent 70%);

/* Off-center spotlight */
background: radial-gradient(circle at 30% 40%, #FEF3C7, #F59E0B 60%, #DC2626);

Position Control

Shifting the center point with at dramatically changes the character of the effect. You can use keywords like at top left, at center, or precise coordinates like at 30% 70%.

/* Glow from top-left corner */
background: radial-gradient(circle at top left, #DBEAFE, transparent 60%);

/* Spotlight from an arbitrary point */
background: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.15), transparent 50%);

Combining multiple radial gradients (see Layered Gradients below) lets you add several light sources to a single element.

conic-gradient — Pie Charts and Color Wheels

A conic gradient sweeps colors around a center point — like the hands of a clock, or the slices of a pie. Unlike linear and radial gradients, the color transition happens angularly rather than spatially.

The syntax is:

background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

Both from angle and at position are optional. Color stops can use percentages (of the full 360° sweep) or explicit angle values.

Examples

/* Simple pie chart: 60% blue, 40% purple */
background: conic-gradient(#3B82F6 60%, #8B5CF6 60%);

/* Progress ring (use border-radius: 50%) */
background: conic-gradient(#22C55E 75%, #E5E7EB 75%);
border-radius: 50%;

/* Full color wheel */
background: conic-gradient(
  hsl(0,   100%, 50%),
  hsl(90,  100%, 50%),
  hsl(180, 100%, 50%),
  hsl(270, 100%, 50%),
  hsl(360, 100%, 50%)
);

The from Ndeg modifier rotates the entire gradient's starting point. For example, from -90deg starts the sweep at the top (12 o'clock) rather than the right (3 o'clock), which is more natural for progress indicators.

/* Progress ring starting at 12 o'clock */
background: conic-gradient(from -90deg, #3B82F6 0% 65%, #E5E7EB 65% 100%);
border-radius: 50%;

Conic gradients are supported in all modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+). No vendor prefixes are needed.

Advanced Techniques

Gradient on Text

Gradient-colored text is a popular heading effect. The trick is to set the gradient as the element's background, clip that background to the text shape, then make the text color transparent so the background shows through.

.gradient-text {
  background: linear-gradient(90deg, #3B82F6, #8B5CF6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Include both the prefixed and unprefixed background-clip declarations for maximum compatibility. This works on inline elements, headings, and any element with displayable text.

Gradient Borders

The CSS border property does not accept gradient values directly. The most flexible workaround is the ::before pseudo-element approach: position the pseudo-element behind the element using a negative inset, give it the gradient background, and let it act as a visible "frame."

.gradient-border {
  position: relative;
  background: var(--surface);
  border-radius: 12px;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3B82F6, #8B5CF6, #EC4899);
  z-index: -1;
}

The inset: -2px makes the pseudo-element 2 px larger on all sides — creating a 2 px visible border. Increase that value for a thicker border. Make sure the parent has position: relative and that nothing clips the z-index: -1 layer.

Alternatively, border-image: linear-gradient(...) 1 works in a single property but prevents border-radius from applying, which limits its usefulness.

Layered Gradients

The background property accepts a comma-separated list of layers, painted from top to bottom. This lets you stack multiple gradients — and even gradients over images.

/* Overlay gradient on top of another */
background:
  linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.7)),
  linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Gradient over a background image */
background:
  linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.8)),
  url('hero.jpg') center / cover no-repeat;

The first value in the list is always the top layer. Keep this in mind when combining gradients with images: the gradient must come first to appear in front of the image.

Repeating Gradients

The repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions tile the gradient pattern indefinitely. This is perfect for striped backgrounds, diagonal textures, and geometric patterns — no image files needed.

/* Diagonal striped lines */
background: repeating-linear-gradient(
  45deg,
  #3B82F6 0px,
  #3B82F6 10px,
  transparent 10px,
  transparent 20px
);

/* Zebra rows (horizontal stripes) */
background: repeating-linear-gradient(
  to bottom,
  transparent 0px,
  transparent 40px,
  rgba(0,0,0,0.04) 40px,
  rgba(0,0,0,0.04) 80px
);

The pattern repeats based on the size of one gradient cycle, which you control by the color stop positions. Pixel units are common here to get precise stripe widths.

Practical Use Cases

Hero Section Background

A full-viewport diagonal gradient is one of the most used CSS gradient patterns. It requires no images and looks distinctive at any screen size.

.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  color: white;
}

Gradient Button

Gradient buttons stand out against flat UI. Fading opacity slightly on hover is more performant than re-rendering the gradient.

.btn-primary {
  background: linear-gradient(to right, #3B82F6, #8B5CF6);
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity .2s;
}

.btn-primary:hover {
  opacity: .88;
}

Image Overlay (Dark Bottom Fade)

This pattern is ubiquitous on cards and hero images: a transparent-to-dark gradient over an image makes white text readable without obscuring the top of the image.

.card-image {
  position: relative;
}

.card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.75));
  border-radius: inherit;
}

Progress Bar

A simple gradient progress bar looks far more polished than a solid color fill and takes no extra markup.

.progress-bar {
  height: 8px;
  background: linear-gradient(to right, #22C55E, #86EFAC);
  border-radius: 4px;
}

Gradient Card Background

Subtle gradients on card backgrounds give depth without heavy shadows. A near-white diagonal gradient reads as a soft lighting effect.

.card {
  background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
}

Frequently Asked Questions

What is the difference between background and background-image for gradients?

Both work. background is the shorthand that covers all background sub-properties. When you set background: linear-gradient(...), it resets other sub-properties — including background-repeat, background-size, and background-color — to their initial values. Use background-image if you want to apply a gradient while keeping an existing background-color declaration intact on the same element.

Can I use a gradient as a border?

Not directly with the border property, which only accepts solid colors. Use the ::before pseudo-element approach shown in the Advanced section above. Alternatively, border-image: linear-gradient(...) 1 works in a single property but prevents border-radius from applying, which makes it unsuitable for rounded elements.

How do I apply a gradient to text?

Set background: linear-gradient(...) on the element, then add -webkit-background-clip: text and background-clip: text, and set color: transparent. The gradient will be visible through the text shape. Include both the prefixed and unprefixed background-clip declarations for full browser coverage.

Why does my gradient have a gray band in the middle when fading to transparent?

This happens because browsers interpolate colors through the sRGB color space by default, and the midpoint between a saturated color and transparent (which is treated as fully transparent black) can produce a desaturated or grayish tone. Fix it by replacing transparent with rgba(R,G,B,0) — the same RGB values as your starting color but with alpha set to 0. This keeps the hue constant throughout the fade.

How do I fade a background image to a color?

Layer a gradient on top using multiple background values: background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.8)), url('image.jpg') center / cover no-repeat;. The gradient must be listed first so it paints over the image. Adjust the percentage where transparent ends to control how much of the image remains fully visible.

Are CSS gradients supported in all browsers?

Yes — linear-gradient and radial-gradient work in every browser in active use today (Chrome, Firefox, Safari, Edge). conic-gradient has been supported since approximately 2021 (Chrome 69, Firefox 83, Safari 12.1). No vendor prefixes are needed for modern usage. If you must support very old browsers (IE 11), linear-gradient is supported but conic-gradient is not.

What is the default direction for linear-gradient?

to bottom — the first color appears at the top and the transition moves downward to the second color at the bottom. This is equivalent to writing 180deg. If you omit the direction argument entirely, the gradient always runs from top to bottom.

How do I generate CSS gradient code without memorizing syntax?

Use the CSS Gradient Generator on this site — pick colors, drag stops, adjust opacity per stop, and copy the final CSS instantly. It supports linear, radial, and conic modes and gives you a live preview as you build.

Key Takeaways

• CSS gradients are background values generated by the browser — no image files, no HTTP requests, infinite resolution.
• The three types are linear-gradient (straight-line transitions), radial-gradient (radiating from a point), and conic-gradient (sweeping around a center).
• Color stops with percentage or pixel positions give you precise control over where each color sits and how abruptly it changes.
• Hard stops (two stops at the same position) create instant color changes — the foundation of all CSS stripe and checkerboard patterns.
• When fading to transparency, use rgba(R,G,B,0) instead of transparent to avoid the gray-banding artifact.
• Multiple gradients can be layered in a single background declaration, and can be combined with background images for overlay effects.

Ready to build? These tools let you generate gradient CSS visually without memorizing syntax:

• CSS Gradient Generator — drag-and-drop color stops, live preview, copy the code
• Color Code Converter — convert between HEX, RGB, HSL, and more
• CSS Box Shadow Generator — build shadow styles visually with instant CSS output