Learn Gradients

Introduction to CSS Gradients

A CSS gradient is a smooth transition between two or more colors. Gradients are generated as images, which means they are set using the background-image property (or the background shorthand), not background-color.

There are three main types of gradients:

linear-gradient() — Colors transition along a straight line (top to bottom, left to right, or any angle).
radial-gradient() — Colors radiate outward from a center point in a circular or elliptical shape.
conic-gradient() — Colors transition around a center point like a color wheel.

Each type also has a repeating variant: repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient().

Gradients are powerful because they create visually rich backgrounds without any image files, resulting in faster load times and infinite scalability.

Linear Gradient Syntax

html

<style>
  .gradient-down {
    /* Default: top to bottom */
    background-image: linear-gradient(#3498db, #2ecc71);
    height: 80px;
    margin-bottom: 12px;
  }

  .gradient-right {
    /* Left to right */
    background-image: linear-gradient(to right, #e74c3c, #f39c12);
    height: 80px;
    margin-bottom: 12px;
  }

  .gradient-angle {
    /* 45-degree angle with three color stops */
    background-image: linear-gradient(45deg, #9b59b6, #3498db, #2ecc71);
    height: 80px;
    margin-bottom: 12px;
  }

  .gradient-stops {
    /* Color stops at specific positions */
    background-image: linear-gradient(
      to right,
      #e74c3c 0%,
      #e74c3c 33%,
      #f39c12 33%,
      #f39c12 66%,
      #2ecc71 66%,
      #2ecc71 100%
    );
    height: 80px;
  }

  div { color: white; padding: 8px; font-weight: bold; }
</style>

<div class="gradient-down">Top to Bottom</div>
<div class="gradient-right">Left to Right</div>
<div class="gradient-angle">45deg with 3 Colors</div>
<div class="gradient-stops">Hard Color Stops (stripes)</div>

Radial, Conic, and Repeating Gradients

Radial Gradient

A radial gradient radiates from a center point outward:

css

/* Default: ellipse from center */
background-image: radial-gradient(#3498db, #2c3e50);

/* Circle shape from top-left */
background-image: radial-gradient(circle at top left, #3498db, #2c3e50);

Conic Gradient

A conic gradient transitions colors around a center point:

css

/* Color wheel effect */
background-image: conic-gradient(red, yellow, green, blue, red);

/* Pie chart */
background-image: conic-gradient(#e74c3c 0% 40%, #3498db 40% 70%, #2ecc71 70% 100%);

Repeating Gradients

Repeating gradients tile the gradient pattern:

css

/* Striped pattern */
background-image: repeating-linear-gradient(
  45deg,
  #f0f0f0,
  #f0f0f0 10px,
  #ddd 10px,
  #ddd 20px
);

This creates diagonal stripes that repeat every 20px.

Gradients