CSS Gradients Complete Guide - Linear, Radial & Conic with Examples

What Are CSS Gradients?

CSS gradients are a way to create smooth transitions between two or more colors entirely with code — no image files required. They are rendered by the browser's graphics engine, which means they are infinitely scalable, look perfect on Retina and high-DPI displays, adapt to any element size, and have essentially zero performance cost compared to image files.

CSS gradients have been supported in all major browsers since around 2012 and are now a fundamental tool in every web designer's kit. There are three main types:

linear-gradient — Colors transition in a straight line

radial-gradient — Colors radiate outward from a center point

conic-gradient — Colors rotate around a center point (like a pie chart)

Each type also has a repeating variant (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient) that tiles the gradient pattern.

Linear Gradients

The linear-gradient() function creates a gradient that transitions along a straight line. The syntax is:

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

Direction Options

• to bottom (default) — top to bottom
• to right — left to right
• to bottom right — diagonal
• 45deg — 45-degree angle (0deg = bottom to top, 90deg = left to right)

/* Simple two-color gradient */
background: linear-gradient(to right, #667eea, #764ba2);
/* Diagonal gradient */
background: linear-gradient(135deg, #f093fb, #f5576c);
/* Three-color gradient */
background: linear-gradient(to right, #4facfe, #00f2fe, #43e97b);
/* With specific color stop positions */
background: linear-gradient(to right, #ff6b6b 0%, #feca57 50%, #48dbfb 100%);

Color Stop Positions

You can precisely control where each color starts and ends using percentages or absolute lengths:

/* Abrupt color transition (hard stop) */

background: linear-gradient(to right, #ff6b6b 50%, #4ecdc4 50%);
/* Color holds at 30%, then transitions */
background: linear-gradient(to bottom, #667eea 0%, #667eea 30%, #764ba2 100%);

Radial Gradients

The radial-gradient() function creates a gradient that radiates outward from an origin point. The syntax is:

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

Shape Options

• ellipse (default) — follows the aspect ratio of the element
• circle — always circular regardless of element dimensions

Size Keywords

• farthest-corner (default) — gradient extends to the farthest corner
• closest-corner — gradient ends at the nearest corner
• farthest-side — gradient ends at the farthest edge
• closest-side — gradient ends at the nearest edge

/* Basic radial gradient */
background: radial-gradient(circle, #f093fb, #f5576c);
/* Radial with explicit size and position */
background: radial-gradient(circle 200px at center, #667eea, #764ba2);
/* Off-center radial (spotlight effect) */
background: radial-gradient(circle at 25% 75%, #f093fb, #f5576c, #1a1a2e);
/* Soft glow effect */
background: radial-gradient(circle at center, rgba(255,200,100,0.8) 0%, rgba(255,200,100,0) 70%);

Conic Gradients

The conic-gradient() function is a newer addition (supported since Chrome 69, Firefox 83, Safari 12.1). Colors rotate around a center point, like a color wheel or pie chart.

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

/* Basic conic gradient (color wheel) */

background: conic-gradient(red, yellow, green, blue, red);
/* Pie chart style */
background: conic-gradient(#ff6b6b 0% 30%, #feca57 30% 60%, #48dbfb 60% 100%);
/* Starting at a specific angle */
background: conic-gradient(from 90deg, #667eea, #764ba2, #667eea);
/* Checkerboard pattern using conic-gradient */
background:
  conic-gradient(#808080 90deg, white 90deg 180deg, #808080 180deg 270deg, white 270deg)
  0 0 / 40px 40px;

Repeating Gradients

All three gradient types have repeating variants that tile the gradient pattern:

/* Striped background */

background: repeating-linear-gradient(
  45deg,
  #f8f9fa,
  #f8f9fa 10px,
  #e9ecef 10px,
  #e9ecef 20px
);
/* Bullseye / concentric circles */
background: repeating-radial-gradient(
  circle,
  #667eea 0px,
  #667eea 10px,
  #764ba2 10px,
  #764ba2 20px
);

Using Transparency in Gradients

Gradients with transparency (using rgba() or transparent keyword) are invaluable for overlays, fades, and layered effects:

/* Overlay that fades to transparent */

background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
/* Use on top of a photo for text readability */
.hero {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)),
    url('hero-photo.jpg');
}
/* Fade-out effect on image edges */
mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);

Note: Avoid transparent for mid-gradient stops with colored endpoints, as browsers interpolate through black (transparent = rgba(0,0,0,0)). Use rgba(r,g,b,0) with the same color instead for smooth fades.

Gradient Text

One of the most popular modern CSS techniques is gradient-colored text:

.gradient-text {

  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; /* Fallback */
}

This works by clipping the gradient to the shape of the text characters. It's widely supported in modern browsers and used by many major brands for eye-catching headlines.

Gradient Borders

CSS doesn't natively support gradient border-color, but you can achieve gradient borders with clever use of background and background-clip:

.gradient-border {

  border: 3px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #667eea, #764ba2) border-box;
}

Alternatively, use ::before pseudo-element with a gradient background behind the main element.

Animating Gradients

Pure CSS gradient transitions can be achieved by animating background-position on an oversized gradient:

.animated-gradient {

  background: linear-gradient(270deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Note: Directly animating gradient color values causes layout repaints on every frame. The background-position trick above is GPU-accelerated and performs much better.

10 Ready-to-Use Gradient Styles

/* 1. Ocean Blue */

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* 2. Sunset */
background: linear-gradient(to right, #f093fb 0%, #f5576c 100%);
/* 3. Fresh Mint */
background: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
/* 4. Warm Flame */
background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
/* 5. Night Sky */
background: linear-gradient(to bottom, #0c1445 0%, #1a237e 50%, #4a148c 100%);
/* 6. Golden Hour */
background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
/* 7. Electric Violet */
background: linear-gradient(to right, #4776e6 0%, #8e54e9 100%);
/* 8. Frosted Glass Overlay */
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
/* 9. Dark Card */
background: linear-gradient(145deg, #1e2746, #2d3561);
/* 10. Neon Accent */
background: linear-gradient(90deg, #00c6ff 0%, #0072ff 100%);

Performance and Browser Support

CSS gradients are GPU-accelerated — they are rendered directly by the graphics processor and do not require any file downloads. This makes them faster than equivalent background images for simple color effects.

Browser support: All three gradient types are supported in all major modern browsers:

• linear-gradient and radial-gradient: Chrome 26+, Firefox 16+, Safari 7+, Edge 12+
• conic-gradient: Chrome 69+, Firefox 83+, Safari 12.1+
• repeating- variants: Same support as their base types

For conic-gradient, you may want to provide a linear-gradient fallback for very old browsers.

Accessibility Considerations

When using gradient backgrounds for text:

• Ensure sufficient contrast between text and all parts of the gradient — not just the darkest or lightest point
• Test readability at both ends of the gradient
• Don't rely on color alone to convey information
• Use the WCAG minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text

Generate CSS Gradients Visually

Building the perfect gradient by typing color values and percentages can be tedious. Our free CSS Gradient Generator lets you create stunning gradients visually — drag color stops, adjust angles, preview in real time, and copy the ready-to-use CSS code with one click.