CSS Reference

CSS Gradients

Complete guide to CSS gradients — linear-gradient, radial-gradient, conic-gradient syntax, color stops, and advanced patterns.

On this page

#Overview
#Syntax
#Values
#Examples
#Common Patterns
#Tips & Best Practices
#Browser Support
#FAQ

Overview

CSS gradients are image values generated by the browser, used with background-image. Three functions are available: linear-gradient() for directional transitions, radial-gradient() for circular/elliptical shapes, and conic-gradient() for angle-based sweeps. Gradients eliminate the need for image files, scale infinitely without pixelation, and are hardware-accelerated. They are one of the most versatile CSS features for creating rich visual effects.

Syntax

background-image: linear-gradient(<angle> | to <side>, <color-stop>, ...)

Values & Keywords

linear-gradient()

Transitions colors along a straight line. Direction specified by angle or keyword (to right, to bottom, etc.).

radial-gradient()

Transitions colors outward from a center point. Shape can be circle or ellipse.

conic-gradient()

Transitions colors around a center point, like a pie chart or color wheel.

color-stop

A color optionally followed by a position: #ff0000 30%. Multiple stops create multi-color gradients.

repeating-*

repeating-linear-gradient() etc. — repeats the gradient pattern to fill the element.

Practical Examples

Smooth horizontal gradient

The simplest gradient — two colors transitioning left to right. Use "to right" or "90deg" for direction.

.gradient-bg {
  background-image: linear-gradient(
    to right,
    #667eea,
    #764ba2
  );
}

Radial spotlight effect

A radial gradient from a light center to a dark edge creates a spotlight or vignette effect — great for hero sections.

.spotlight {
  background-image: radial-gradient(
    circle at 30% 40%,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 60%
  ),
  linear-gradient(135deg, #0f172a, #1e293b);
}

Gradient Text

Gradient text

Apply a gradient as the text color using background-clip and transparent text. Supported in all modern browsers.

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

Multi-stop color band

Using hard color stops (two stops at the same position) creates sharp color bands instead of smooth transitions — useful for progress bars or infographics.

.progress {
  background: linear-gradient(
    to right,
    #22c55e 0%,
    #22c55e 40%,
    #eab308 40%,
    #eab308 70%,
    #ef4444 70%,
    #ef4444 100%
  );
}

Try it visually

Use our interactive background-image (gradients) generator to experiment with values and see the result in real-time. Copy production-ready CSS, cross-browser CSS, or Tailwind classes with one click.

Open CSS Gradients Tool

Common Patterns

Gradient border

Create a gradient border by layering a solid background over a gradient background with padding. The gradient shows through the gap.

.gradient-border {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #667eea, #764ba2) border-box;
  border: 2px solid transparent;
  border-radius: 12px;
}

Striped pattern

Repeating gradients with hard stops create patterns. This creates diagonal stripes often used for loading states or progress bars.

.striped {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.05) 10px,
    rgba(0, 0, 0, 0.05) 20px
  );
}

Animated gradient hover

Create a smooth gradient animation by oversizing the background and shifting its position on hover.

.animated-gradient {
  background: linear-gradient(
    270deg, #667eea, #764ba2, #f093fb
  );
  background-size: 300% 300%;
  transition: background-position 0.5s ease;
}

.animated-gradient:hover {
  background-position: 100% 50%;
}

Tips & Best Practices

1
Always set a fallback background-color before the gradient — older email clients and some RSS readers ignore background-image.
2
Use background-size: 200% with background-position for animatable gradients. Transition background-position instead of the gradient itself.
3
Combine multiple background-image gradients (comma-separated) to create complex patterns like grids, stripes, and polka dots without images.
4
Use the transparent keyword to fade a color to the element background — but note that transparent is actually rgba(0, 0, 0, 0), which can cause a gray band. Use the color with alpha 0 instead (e.g., rgba(102, 126, 234, 0)).
5
For smooth gradients, add a mid-point color between contrasting stops to prevent the muddy "gray zone" that occurs when complementary colors mix.

Browser Support

linear-gradient and radial-gradient: all modern browsers. conic-gradient: Chrome 69+, Firefox 83+, Safari 12.1+.

Related CSS Guides

color

CSS Color Formats

Complete guide to CSS color formats — HEX, RGB, HSL, OKLCH, named colors, transparency, and color-mix().

button CSS

CSS Button Styles

Complete guide to styling CSS buttons — backgrounds, borders, hover effects, transitions, focus states, and accessibility.

CSS Gradients — FAQ

Common questions about background-image (gradients) and how to use it effectively.

How do I create a diagonal gradient?

Use an angle: linear-gradient(45deg, #ff0000, #0000ff) or a corner keyword: linear-gradient(to bottom right, #ff0000, #0000ff). Angles start from 12 o'clock and go clockwise.

Can I animate gradients?

Not directly with CSS transitions — the gradient function itself is not interpolatable. Two workarounds: (1) Use CSS @property to register individual color custom properties and animate those. (2) Use background-size: 200% and animate background-position.

How do I create a gradient border?

Use the background layering technique: set a solid background on padding-box and the gradient on border-box, with a transparent border. Example: background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #667eea, #764ba2) border-box; border: 2px solid transparent.

Why does my gradient have a gray band in the middle?

When two complementary colors (e.g., blue and orange) mix, the midpoint passes through a desaturated gray. Fix this by adding a vibrant mid-point color, or use a perceptually uniform color space like oklch for interpolation.

How do I make a gradient overlay on an image?

Stack the gradient above the image using multiple backgrounds: background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.8) 100%), url(image.jpg) center/cover. The gradient is listed first (rendered on top).