CSS Gradients

A gradient is a smooth transition between two or more colors. CSS generates gradients directly in the browser — no image file needed. They work anywhere a background image is accepted, which means they are lightweight, scalable, and responsive by default.

Three Types of CSS Gradients

• Linear gradient — colors flow in a straight line
• Radial gradient — colors radiate outward from a center point
• Conic gradient — colors sweep around a center point like a clock

Linear Gradients

Colors flow from one side to another in a straight line.

background: linear-gradient(direction, color1, color2, ...);

Basic Top-to-Bottom (Default)

.hero {
  background: linear-gradient(#3498db, #2ecc71);
}

DIAGRAM — linear-gradient(#3498db, #2ecc71):

┌──────────────────────┐
│  ████ blue ████      │  ← starts blue
│  ▓▓▓▓▓▓▓▓▓▓▓▓▓       │
│  ░░░░░░░░░░░░░       │
│  ████ green ████     │  ← ends green
└──────────────────────┘

Direction with Keywords

background: linear-gradient(to right, #e74c3c, #f39c12);
background: linear-gradient(to bottom right, #9b59b6, #3498db);
background: linear-gradient(to top, #1a1a2e, #16213e);

Direction with Degrees

/* 0deg = bottom to top, 90deg = left to right */
background: linear-gradient(45deg, #ff6b6b, #feca57);
background: linear-gradient(135deg, #667eea, #764ba2);

DIAGRAM — Degree reference:

       0deg (up)
          ↑
270deg ←──┼──→ 90deg
          ↓
       180deg (down)

45deg goes diagonally from bottom-left to top-right
135deg goes diagonally from top-left to bottom-right

Multiple Color Stops

/* Rainbow */
background: linear-gradient(
  to right,
  red,
  orange,
  yellow,
  green,
  blue,
  indigo,
  violet
);

Color Stop Positions

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

/* Blue covers first 40%, then transitions to orange */
background: linear-gradient(to right, #3498db 40%, #e67e22 40%);

/* Sharp color split (no transition) */
background: linear-gradient(to right, red 50%, blue 50%);

DIAGRAM — Sharp 50/50 split:

┌──────────────────────┐
│ ████ RED ████│████ BLUE ████ │
└──────────────────────┘
           ↑
     Sharp edge at 50%

Repeating Linear Gradients

Creates a striped pattern by repeating the gradient.

.stripes {
  background: repeating-linear-gradient(
    45deg,
    #f0f0f0,
    #f0f0f0 10px,
    #cccccc 10px,
    #cccccc 20px
  );
}

Radial Gradients

Colors spread outward from a center point, like a spotlight or ripple on water.

background: radial-gradient(shape size at position, color1, color2);

Basic Radial Gradient

.spotlight {
  background: radial-gradient(circle, #fff 0%, #000 100%);
}

DIAGRAM — radial-gradient(circle, white, black):

        ░░░░░░░
      ░░░ ██ ░░░
    ░░░ ██████ ░░░
  ░░░ ██████████ ░░░
    ░░░ ██████ ░░░
      ░░░ ██ ░░░
        ░░░░░░░

White at center → black at edges

Ellipse Shape (Default)

.soft-glow {
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,0.8),
    rgba(255,255,255,0) 70%
  );
}

Positioned Center Point

/* Gradient center is at top-left */
background: radial-gradient(circle at top left, #f7971e, #ffd200);

/* Center is 30% from left, 20% from top */
background: radial-gradient(circle at 30% 20%, #36d1dc, #5b86e5);

Conic Gradients

Colors sweep around a center point. The result looks like a pie chart or a color wheel.

background: conic-gradient(color1, color2, color3);

Basic Conic Gradient

.color-wheel {
  background: conic-gradient(red, yellow, green, blue, red);
  border-radius: 50%;
}

DIAGRAM — conic-gradient (pie view):

      🟡 Yellow
   🔴       🟢
Red             Green
   🔵       🔵
      Blue

Pie Chart with conic-gradient

.pie {
  background: conic-gradient(
    #e74c3c 0% 30%,    /* Red: 30% */
    #3498db 30% 60%,   /* Blue: 30% */
    #2ecc71 60% 100%   /* Green: 40% */
  );
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

Gradients as Text Fill

You can apply a gradient to text using background-clip: text.

.gradient-text {
  background: linear-gradient(90deg, #e96c4c, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

Multiple Gradient Layers

CSS allows layering multiple gradients on one element. Separate them with commas. The first listed gradient sits on top.

.multi-layer {
  background:
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
    url("photo.jpg") center/cover;
}
/* Dark overlay on top of an image */

Common Gradient Recipes

/* Sunset */
background: linear-gradient(to bottom, #f7971e, #ffd200);

/* Ocean */
background: linear-gradient(180deg, #00c6ff, #0072ff);

/* Dark hero */
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

/* Soft purple */
background: linear-gradient(120deg, #a18cd1 0%, #fbc2eb 100%);

/* Glass overlay */
background: linear-gradient(
  135deg,
  rgba(255,255,255,0.2),
  rgba(255,255,255,0.05)
);

Quick Reference

Gradients replace image files with pure CSS — smaller page size, infinite scalability, and full control through code. Start with a two-color linear gradient and build up from there as your designs demand more depth.