What Are CSS Gradients?

A gradient is a smooth transition between two or more colors. Instead of a solid background color, gradients create dynamic, colorful backgrounds without using images. They are resolution-independent and look sharp on any screen.

Linear Gradient Syntax

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

CSS

/* Basic: top to bottom (default direction) */
.box {
  background: linear-gradient(#3498db, #2ecc71);
}

Gradient Direction

Using Keywords

CSS

/* Top to bottom (default) */
background: linear-gradient(to bottom, #3498db, #2ecc71);

/* Left to right */
background: linear-gradient(to right, #3498db, #2ecc71);

/* Bottom to top */
background: linear-gradient(to top, #e74c3c, #f39c12);

/* Diagonal */
background: linear-gradient(to bottom right, #3498db, #8e44ad);
background: linear-gradient(to top left, #e74c3c, #f39c12);

Using Angles

CSS

/* 0deg = to top, 90deg = to right, 180deg = to bottom */
background: linear-gradient(45deg, #3498db, #8e44ad);
background: linear-gradient(135deg, #667eea, #764ba2);
background: linear-gradient(90deg, #fc5c7d, #6a82fb);

Multiple Color Stops

Add as many colors as you want:

CSS

/* Three colors */
background: linear-gradient(to right, #e74c3c, #f39c12, #2ecc71);

/* Rainbow gradient */
background: linear-gradient(
  to right,
  #ff0000,
  #ff7700,
  #ffff00,
  #00ff00,
  #0000ff,
  #8b00ff
);

/* Sunset effect */
background: linear-gradient(
  to bottom,
  #2c3e50,
  #3498db,
  #e74c3c,
  #f39c12
);

Controlling Color Stop Positions

By default, colors are evenly distributed. You can control exactly where each color starts and ends:

CSS

/* First color takes 70%, second takes remaining 30% */
background: linear-gradient(to right, #3498db 70%, #2ecc71 70%);

/* Specific positions */
background: linear-gradient(
  to right,
  #3498db 0%,
  #3498db 25%,
  #2ecc71 25%,
  #2ecc71 50%,
  #e74c3c 50%,
  #e74c3c 75%,
  #f39c12 75%,
  #f39c12 100%
);
/* Creates solid color stripes! */

Hard Color Stops (No Blending)

When two color stops share the same position, you get a sharp line instead of a smooth blend:

CSS

/* Sharp line between colors */
background: linear-gradient(to right, #3498db 50%, #e74c3c 50%);

/* Progress bar effect */
.progress {
  background: linear-gradient(to right, #27ae60 65%, #eee 65%);
}

Transparent Gradients

Use transparent or rgba for gradients that fade to transparency:

CSS

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

/* Overlay effect */
background: linear-gradient(
  to bottom,
  rgba(0, 0, 0, 0),
  rgba(0, 0, 0, 0.8)
);

Image with Gradient Overlay

CSS

.hero {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7)),
    url('hero.jpg') center/cover;
  color: white;
}

Repeating Linear Gradients

Create repeating patterns with repeating-linear-gradient():

CSS

/* Stripes */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #3498db,
    #3498db 10px,
    #2980b9 10px,
    #2980b9 20px
  );
}

/* Subtle lines */
.lined {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 19px,
    #eee 19px,
    #eee 20px
  );
}

Practical Gradient Examples

Button Gradient

CSS

.btn-gradient {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-gradient:hover {
  opacity: 0.9;
}

Card Accent Border

CSS

.card {
  border-top: 4px solid transparent;
  border-image: linear-gradient(to right, #3498db, #8e44ad) 1;
}

Text Gradient

CSS

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

Full-Page Background

CSS

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
}

Summary

CSS linear gradients create smooth color transitions along a straight line. Control the direction with keywords or angles, add multiple color stops for complex effects, use hard stops for stripes, and combine with transparent colors for overlay effects. Gradients are resolution-independent, fast-loading alternatives to background images.