CSS Gradients: In-Depth Guide

What are CSS Gradients?

CSS gradients allow you to create smooth transitions between two or more colors, without using images. Gradients can be linear, radial, conic, or even repeating, and are highly customizable for backgrounds, buttons, borders, and more.

Color stops define where each color starts and ends.
Gradients can be combined, angled, and animated for creative effects.
They are resolution-independent and render smoothly at any size.

Linear Gradient

Creates a gradient along a straight line. You can set the direction (angle or to side/corner) and as many color stops as you want. Linear gradients are great for backgrounds, buttons, borders, and overlays. You can use keywords like to right, to bottom left, or angles like 45deg.

Multiple color stops create smooth transitions between several colors.
Use transparency in color stops for overlay effects.

.linear-gradient-demo {
  background: linear-gradient(90deg, #3498db, #8e44ad);
}
.linear-gradient-diagonal {
  background: linear-gradient(45deg, #ff6a00, #ffd200, #8e44ad);
}
.linear-gradient-transparent {
  background: linear-gradient(to right, #3498db 70%, transparent);
}

Linear Gradient (90°)

Diagonal Linear Gradient (45°)

Linear Gradient with Transparency

Radial Gradient

Radiates from an origin (center by default) outward in a circle or ellipse. You can control the shape (circle or ellipse), size, and position. Radial gradients are useful for spotlight effects, buttons, and backgrounds.

Use ellipse for oval shapes.
Change the position with at x% y% or at left top.

.radial-gradient-demo {
  background: radial-gradient(circle at 60% 40%, #f7971e, #ffd200 70%, #f7971e 100%);
}
.radial-gradient-ellipse {
  background: radial-gradient(ellipse at center, #8e44ad 0%, #ffd200 100%);
}

Radial Gradient (Circle)

Radial Gradient (Ellipse)

Conic Gradient

Colors sweep around a center point, like a pie chart. You can control the starting angle and add color stops for segments. Conic gradients are great for pie charts, color wheels, and decorative backgrounds.

Use from angle to set the starting point.
Color stops can create hard edges for pie slices.

.conic-gradient-demo {
  background: conic-gradient(from 45deg, #f7971e, #ffd200, #f7971e, #8e44ad);
}
.conic-gradient-segments {
  background: conic-gradient(
    #3498db 0 25%, #ffd200 0 50%, #8e44ad 0 75%, #f7971e 0 100%
  );
}

Conic Gradient

Conic Gradient (Segments)

Repeating Gradients

Repeats a gradient pattern infinitely. Useful for stripes, patterns, and backgrounds. You can use repeating-linear-gradient or repeating-radial-gradient.

Adjust the size of the pattern by changing color stop positions.
Combine with other gradients for creative effects.

.repeating-gradient-demo {
  background: repeating-linear-gradient(45deg, #3498db, #3498db 10px, #fff 10px, #fff 20px);
}
.repeating-radial-demo {
  background: repeating-radial-gradient(circle, #8e44ad, #8e44ad 10px, #fff 10px, #fff 20px);
}

Repeating Linear Gradient

Repeating Radial Gradient

Multiple Gradients

You can layer multiple gradients for complex effects by separating them with commas. Each layer can have its own type, direction, and color stops. The first gradient is on top.

Use transparency to let lower layers show through.
Great for overlays, highlights, and decorative backgrounds.

.multiple-gradient-demo {
  background:
    linear-gradient(135deg, #8e44ad 40%, transparent 60%),
    radial-gradient(circle at 80% 20%, #ffd200 20%, transparent 60%),
    linear-gradient(90deg, #3498db, #8e44ad);
}
.multiple-gradient-overlay {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.3), transparent),
    linear-gradient(90deg, #3498db, #8e44ad);
}

Multiple Gradients

Multiple Gradients (Overlay)

Angle & Color Stops

Gradients can be angled and have custom color stops for precise control. Color stops can use any CSS color and can be positioned with percentages or lengths. This allows for sharp transitions or smooth blends.

Use more color stops for rainbow or multi-band effects.
Mix solid and transparent stops for highlights or fades.

.angle-gradient-demo {
  background: linear-gradient(120deg, #3498db 10%, #fff 50%, #8e44ad 90%);
}
.gradient-rainbow {
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
}

Angle & Color Stops

Rainbow Gradient

Gradient Text

You can apply gradients to text using background-clip: text and color: transparent. This creates eye-catching headlines and effects.

Works best with bold, large text.
Requires -webkit-background-clip: text for Chrome/Safari.

.gradient-text {
  background: linear-gradient(90deg, #3498db, #8e44ad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

Gradient Text Example

Animated Gradient

Gradients can be animated using CSS keyframes for dynamic backgrounds and effects. Animate the background position, angle, or color stops for a lively UI.

Use background-size and background-position for moving gradients.
Combine with transitions for smooth effects.

.animated-gradient-demo {
  background: linear-gradient(270deg, #3498db, #8e44ad, #ffd200, #3498db);
  background-size: 600% 600%;
  animation: gradientMove 4s ease-in-out infinite;
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Animated Gradient

Gradient with Background Image

You can combine gradients with background images to create overlays, enhance readability, or add visual depth. The gradient is listed first in the background property, so it appears above the image. Use transparency in the gradient to let the image show through.

Great for hero sections, cards, and banners.
Use background-blend-mode for creative effects (e.g., multiply, overlay).

.gradient-image-demo {
  background:
    linear-gradient(rgba(52,152,219,0.7), rgba(142,68,173,0.7)),
    url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=600&q=80') center/cover no-repeat;
  color: #fff;
  background-blend-mode: overlay;
}

Gradient + Background Image