How to Create a CSS Gradient: A Complete Guide with Examples

CSS gradients let you create smooth color transitions without images — pure CSS, no HTTP requests, infinitely scalable. The syntax is compact but the possibilities are vast. This guide covers linear, radial, and conic gradients with practical copy-paste examples for every common use case.

Types of CSS Gradients

CSS provides three gradient functions:

• linear-gradient() — colors transition along a straight line
• radial-gradient() — colors radiate from a center point
• conic-gradient() — colors rotate around a center point (like a pie chart)

All can be used as values for background, background-image, border-image, or anywhere images are accepted.

Use DevZone's CSS Gradient Generator to build gradients visually and copy the resulting CSS.

Linear Gradients

The most common type: colors flow from one direction to another.

Basic syntax:

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

Direction values:

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

Examples:

Simple two-color gradient:

background: linear-gradient(to right, #667eea, #764ba2);

Three-color gradient:

background: linear-gradient(135deg, #f5f7fa, #c3cfe2, #667eea);

With explicit color stop positions:

background: linear-gradient(to right, #ff6b6b 0%, #feca57 50%, #48dbfb 100%);

Hard stop (no transition — solid color change):

background: linear-gradient(to right, #ff6b6b 50%, #48dbfb 50%);

Radial Gradients

Colors emanate from a center point in a circular or elliptical pattern.

Basic syntax:

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

Shape: circle or ellipse (default)
Size: closest-side, farthest-corner (default), closest-corner, farthest-side
Position: like background-position — center, top right, 50% 50%

Examples:

Centered radial gradient:

background: radial-gradient(circle, #667eea, #764ba2);

Offset center point (spotlight effect):

background: radial-gradient(circle at 25% 35%, #ffd89b, #19547b);

Circular with sharp edge:

background: radial-gradient(circle closest-side, #ff6b6b 60%, transparent 60%);

Conic Gradients

Colors rotate around a center point, like the segments of a pie.

Basic syntax:

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

Examples:

Color wheel:

background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

Pie chart segments:

background: conic-gradient(
  #ff6b6b 0% 25%,
  #feca57 25% 60%,
  #48dbfb 60% 100%
);

Rotated pie chart (rotate starting angle):

background: conic-gradient(from 180deg, #ff6b6b 0% 40%, #48dbfb 40% 100%);

Repeating Gradients

Add repeating- to any gradient type to tile the pattern.

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #f7f7f7,
  #f7f7f7 10px,
  #e0e0e0 10px,
  #e0e0e0 20px
);

/* Circular rings */
background: repeating-radial-gradient(
  circle at center,
  #667eea 0px,
  #667eea 10px,
  #764ba2 10px,
  #764ba2 20px
);

Multiple Gradients (Layering)

You can stack multiple gradients as comma-separated values. The first value is on top:

background: 
  linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
  linear-gradient(135deg, #667eea, #764ba2);
background-size: 20px 20px, 20px 20px, 100% 100%;

This creates a grid overlay on top of a solid gradient — useful for graph paper effects.

Popular Gradient Recipes

Sunrise:

background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);

Ocean:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Warm sunset:

background: linear-gradient(to right, #f7971e, #ffd200);

Cool mint:

background: linear-gradient(to right, #00b09b, #96c93d);

Dark professional:

background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);

Text gradient (requires background-clip):

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

Browser Support and Prefixes

All modern browsers support CSS gradients without vendor prefixes. The background-clip: text technique requires -webkit-background-clip and -webkit-text-fill-color for Safari compatibility, even in modern versions.

You can safely use linear-gradient, radial-gradient, and conic-gradient (conic has slightly lower support — check if you need IE11 support, though IE11 is not relevant for most projects in 2025).

FAQ

How do I make a gradient with transparency?

Use rgba() or hsla() color values, or the transparent keyword:

background: linear-gradient(to right, rgba(102, 126, 234, 1), rgba(102, 126, 234, 0));

Can I animate a CSS gradient?

Direct gradient animation (animating the gradient itself) isn't performant in all browsers. Better approach: animate background-position on a larger gradient image:

.animated { 
  background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
  background-size: 200%;
  animation: shift 3s infinite linear;
}
@keyframes shift { from { background-position: 0% } to { background-position: 200% } }

What's the difference between background and background-image for gradients?

background: linear-gradient(...) is shorthand. background-image: linear-gradient(...) is the explicit property. Both work the same way for gradients.

Why does my gradient look washed out in the middle?

This is the "dead zone" problem with multi-stop gradients in perceptual color spaces. Add an intermediate stop at the midpoint with a more saturated color, or use a CSS gradient tool that uses OKLCH/P3 color spaces which don't have this problem.