What Are CSS Gradients?

Gradients are smooth transitions between two or more colors. They are created entirely with CSS, meaning no image files are needed. This makes them fast to load and easy to change.

Gradients are used with the `background` or `background-image` property.

Linear Gradients

Linear gradients transition along a straight line. By default, they go from top to bottom.

CSS

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

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

/* Diagonal */
.gradient-diagonal {
  background: linear-gradient(to bottom right, #667eea, #764ba2);
}

/* Using degrees */
.gradient-angle {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

Direction Values

to bottom: Top to bottom (default)
to top: Bottom to top
to right: Left to right
to left: Right to left
to bottom right: Top-left to bottom-right corner
45deg: A specific angle (0deg = bottom to top, 90deg = left to right)

Multiple Color Stops

CSS

/* Three colors */
.sunset {
  background: linear-gradient(to right, #ee7752, #e73c7e, #23a6d5);
}

/* Four colors - rainbow strip */
.rainbow {
  background: linear-gradient(
    to right,
    #ff0000,
    #ff9900,
    #ffff00,
    #00ff00,
    #0099ff,
    #6633ff
  );
}

Color Stop Positions

You can control exactly where each color starts and ends using percentages or lengths.

CSS

/* Color starts at specific positions */
.custom-stops {
  background: linear-gradient(
    to right,
    #3498db 0%,
    #3498db 30%,
    #2ecc71 30%,
    #2ecc71 100%
  );
}

/* Hard color stop - creates a sharp line, no transition */
.hard-stop {
  background: linear-gradient(
    to right,
    #3498db 50%,
    #e74c3c 50%
  );
}

/* Unequal distribution */
.weighted-gradient {
  background: linear-gradient(
    to right,
    #3498db 0%,
    #3498db 70%,
    #2ecc71 100%
  );
}

Radial Gradients

Radial gradients radiate outward from a center point.

CSS

/* Basic circle gradient */
.radial-basic {
  background: radial-gradient(circle, #3498db, #2c3e50);
}

/* Ellipse (default shape) */
.radial-ellipse {
  background: radial-gradient(ellipse, #ffecd2, #fcb69f);
}

/* Position the center */
.radial-positioned {
  background: radial-gradient(circle at top left, #a8edea, #fed6e3);
}

.radial-corner {
  background: radial-gradient(circle at bottom right, #667eea, #764ba2);
}

.radial-offset {
  background: radial-gradient(circle at 30% 70%, #ffecd2, #fcb69f);
}

Radial Gradient Sizing

CSS

/* Size keywords */
.closest-side {
  background: radial-gradient(circle closest-side, #3498db, #2c3e50);
}

.farthest-corner {
  background: radial-gradient(circle farthest-corner, #3498db, #2c3e50);
}

/* Specific size */
.fixed-size {
  background: radial-gradient(circle 200px at center, #3498db, #2c3e50);
}

Conic Gradients

Conic gradients transition around a center point, like the hands of a clock.

CSS

/* Basic conic gradient */
.conic-basic {
  background: conic-gradient(#ff0000, #ff9900, #ffff00, #00ff00, #0099ff, #6633ff, #ff0000);
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

/* Pie chart effect */
.pie-chart {
  background: conic-gradient(
    #3498db 0% 40%,
    #2ecc71 40% 70%,
    #e74c3c 70% 100%
  );
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

/* Starting from a specific angle */
.conic-offset {
  background: conic-gradient(from 45deg, #3498db, #e74c3c, #3498db);
}

Repeating Gradients

You can repeat gradient patterns to create stripes and textures.

CSS

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

/* Subtle background pattern */
.subtle-stripes {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.03) 10px,
    rgba(0, 0, 0, 0.03) 20px
  );
}

/* Repeating radial - concentric circles */
.concentric {
  background: repeating-radial-gradient(
    circle,
    #3498db,
    #3498db 10px,
    #2980b9 10px,
    #2980b9 20px
  );
}

Practical Gradient Examples

Text with Gradient Background

CSS

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

Gradient Buttons

CSS

.gradient-button {
  padding: 12px 32px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

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

Gradient Overlay on Images

CSS

.hero-section {
  position: relative;
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
  min-height: 500px;
}

.hero-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

Section Divider

CSS

.section-divider {
  height: 4px;
  background: linear-gradient(to right, #3498db, #2ecc71, #e74c3c);
  border: none;
}

Gradient Borders

CSS

.gradient-border {
  border: 3px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg, #667eea, #764ba2);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: 12px;
  padding: 24px;
}

Layering Gradients

You can combine multiple gradients and even mix gradients with images.

CSS

/* Multiple gradient layers */
.layered {
  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%;
}

/* Gradient over an image */
.hero {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)),
    url('background.jpg') center/cover no-repeat;
  color: white;
  min-height: 100vh;
}

Summary

CSS gradients create beautiful color transitions without images. Use linear gradients for directional transitions, radial gradients for circular effects, and conic gradients for angle-based patterns. Control color stop positions for precise designs, use repeating gradients for patterns, and layer gradients for complex backgrounds. Gradients are lightweight, scalable, and resolution-independent.

In the next article, you will learn about CSS transforms.