CSS Gradients Guide — Linear, Radial and Conic Gradients

1. What Are CSS Gradients?

CSS gradients let you create smooth color transitions between two or more colors directly in your stylesheet. Unlike solid background colors, gradients blend colors seamlessly, producing effects that previously required image files.

Gradients are applied using the background-image property (not background-color). Because they are rendered by the browser, they scale perfectly to any resolution, are infinitely zoomable, and require no external image files — meaning faster page loads and easier maintenance.

There are three types of CSS gradients:

• Linear gradients — transition along a straight line
• Radial gradients — transition outward from a center point in a circular or elliptical shape
• Conic gradients — transition around a center point, like a color wheel or pie chart

/* Basic syntax for each type */
background-image: linear-gradient(red, blue);
background-image: radial-gradient(red, blue);
background-image: conic-gradient(red, blue);

2. Linear Gradients

A linear gradient creates a smooth transition along a straight line. The default direction is top to bottom, but you can control the angle or use direction keywords.

Basic Syntax

/* Default: top to bottom */
background-image: linear-gradient(#6366f1, #ec4899);

/* With direction keyword */
background-image: linear-gradient(to right, #6366f1, #ec4899);

/* With explicit angle (0deg = bottom to top) */
background-image: linear-gradient(135deg, #6366f1, #ec4899);

Direction Keywords

Use to followed by a direction to control where the gradient flows:

/* Four cardinal directions */
background-image: linear-gradient(to right, #6366f1, #ec4899);    /* left → right */
background-image: linear-gradient(to left, #6366f1, #ec4899);     /* right → left */
background-image: linear-gradient(to bottom, #6366f1, #ec4899);   /* top → bottom */
background-image: linear-gradient(to top, #6366f1, #ec4899);      /* bottom → top */

/* Four diagonal directions */
background-image: linear-gradient(to bottom right, #6366f1, #ec4899);
background-image: linear-gradient(to bottom left, #6366f1, #ec4899);
background-image: linear-gradient(to top right, #6366f1, #ec4899);
background-image: linear-gradient(to top left, #6366f1, #ec4899);

Multiple Color Stops

You are not limited to two colors. Add as many color stops as you like, and optionally control where each color transition point sits:

/* Rainbow gradient with multiple stops */
background-image: linear-gradient(
    to right,
    #ff0000,  /* red */
    #ff8800,  /* orange */
    #ffff00,  /* yellow */
    #00cc00,  /* green */
    #0066ff,  /* blue */
    #8800ff   /* violet */
);

/* Hard color stops (creates stripes) */
background-image: linear-gradient(
    to right,
    #6366f1 0%,
    #6366f1 33%,
    #ec4899 33%,
    #ec4899 66%,
    #f59e0b 66%,
    #f59e0b 100%
);

Repeating Linear Gradients

The repeating-linear-gradient() function tiles the gradient pattern, which is useful for creating striped backgrounds:

/* Diagonal stripes */
background-image: repeating-linear-gradient(
    45deg,
    #6366f1,
    #6366f1 10px,
    #818cf8 10px,
    #818cf8 20px
);

/* Thin barcode-style stripes */
background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 2px,
    #333 2px,
    #333 4px
);

3. Radial Gradients

A radial gradient radiates outward from a center point, creating circular or elliptical color transitions. It is perfect for spotlight effects, vignettes, and focal-point backgrounds.

Basic Syntax

/* Ellipse (default shape) */
background-image: radial-gradient(#6366f1, #ec4899);

/* Explicit circle */
background-image: radial-gradient(circle, #6366f1, #ec4899);

/* Explicit ellipse */
background-image: radial-gradient(ellipse, #6366f1, #ec4899);

Size Keywords

Control how far the gradient extends from its center with size keywords:

/* Closest-side: gradient ends at the nearest edge */
background-image: radial-gradient(circle closest-side, #6366f1, #ec4899);

/* Closest-corner: gradient ends at the nearest corner */
background-image: radial-gradient(circle closest-corner, #6366f1, #ec4899);

/* Farthest-side: gradient ends at the farthest edge */
background-image: radial-gradient(circle farthest-side, #6366f1, #ec4899);

/* Farthest-corner: gradient ends at the farthest corner (default) */
background-image: radial-gradient(circle farthest-corner, #6366f1, #ec4899);

/* Explicit size in pixels or percentages */
background-image: radial-gradient(circle 120px, #6366f1, #ec4899);

Position Control

By default the gradient center is at 50% 50% (the middle). Use at to move the center point anywhere:

/* Gradient centered at top-left */
background-image: radial-gradient(circle at 0% 0%, #6366f1, #ec4899);

/* Gradient centered at bottom-right */
background-image: radial-gradient(circle at 100% 100%, #6366f1, #ec4899);

/* Use keywords */
background-image: radial-gradient(circle at top left, #6366f1, #ec4899);
background-image: radial-gradient(circle at center, #6366f1, #ec4899);

Spotlight / Vignette Effect

/* Light center, dark edges (vignette) */
background-image: radial-gradient(
    ellipse at center,
    rgba(255,255,255,0) 0%,
    rgba(0,0,0,0.7) 100%
);

4. Conic Gradients

A conic gradient transitions colors around a center point, like a pie chart or a color wheel. Instead of flowing outward (radial) or in a line (linear), the colors sweep clockwise at a given angle.

Basic Syntax

/* Simple two-color conic gradient */
background-image: conic-gradient(#6366f1, #ec4899);

/* With a starting angle */
background-image: conic-gradient(from 0deg, #6366f1, #ec4899);

/* Start from 90 degrees (top) */
background-image: conic-gradient(from 90deg, #6366f1, #ec4899);

Pie Charts

Hard color stops with percentage positions create sharp-edged sectors — ideal for pure-CSS pie charts:

/* Pie chart: 60% blue, 25% pink, 15% amber */
background-image: conic-gradient(
    #6366f1 0% 60%,    /* 0% to 60% = blue sector */
    #ec4899 60% 85%,   /* 60% to 85% = pink sector */
    #f59e0b 85% 100%   /* 85% to 100% = amber sector */
);
border-radius: 50%;

Color Wheels

/* Full hue rotation color wheel */
background-image: conic-gradient(
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(360, 100%, 50%)
);
border-radius: 50%;

Conic Gradient with Percentage Stops

/* Traffic light style with exact control */
background-image: conic-gradient(
    from 180deg,
    #ef4444 0deg 120deg,    /* red: 0°-120° */
    #22c55e 120deg 240deg,  /* green: 120°-240° */
    #3b82f6 240deg 360deg   /* blue: 240°-360° */
);

/* Checkerboard-like pattern using conic + repeating */
background-image: conic-gradient(
    #6366f1 90deg,
    #ec4899 90deg 180deg,
    #6366f1 180deg 270deg,
    #ec4899 270deg
);
background-size: 40px 40px;

5. Practical Examples & Tips

Below are five real-world CSS gradient techniques you can copy and use today.

Example 1: Sunset Sky Background

/* Layered linear gradient simulating a sunset */
.sunset-bg {
    background: linear-gradient(
        to top,
        #f97316 0%,    /* orange horizon */
        #ec4899 30%,   /* pink sky */
        #8b5cf6 60%,   /* purple twilight */
        #1e1b4b 100%   /* deep night sky */
    );
    min-height: 300px;
}

Example 2: Metallic Button

/* Shiny metallic button using a subtle linear gradient */
.metallic-btn {
    padding: 12px 32px;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(
        to bottom,
        #6b7280 0%,
        #4b5563 40%,
        #374151 60%,
        #4b5563 100%
    );
    box-shadow: 0 2px 4px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(255,255,255,0.15);
    cursor: pointer;
}

Example 3: Mesh Gradient

/* Mesh gradient by layering multiple radial gradients */
.mesh-gradient {
    background:
        radial-gradient(at 20% 80%, #6366f180 0%, transparent 50%),
        radial-gradient(at 80% 20%, #ec489980 0%, transparent 50%),
        radial-gradient(at 50% 50%, #f59e0b80 0%, transparent 50%),
        radial-gradient(at 10% 10%, #22d3ee80 0%, transparent 40%);
    background-color: #f8fafc;
    min-height: 200px;
}

Example 4: Striped Pattern

/* Diagonal stripe pattern using repeating linear gradient */
.striped-bg {
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(99, 102, 241, 0.15) 8px,
        rgba(99, 102, 241, 0.15) 16px
    );
    min-height: 120px;
}

Example 5: Text Gradient with background-clip

/* Gradient text using background-clip */
.gradient-text {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #6366f1, #ec4899, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* fallback for non-webkit */
}

Quick Tips

• Performance — Simple gradients are fast, but layering many large radial gradients can impact repaint performance on mobile
• Fallback — Always set a solid background-color before the gradient so old browsers still see a usable color
• Transparency — Use transparent or rgba() / hsla() color values to create overlay effects on top of images
• Shorthand — Gradients work in the background shorthand alongside other properties like background-size and background-position
• Animations — Gradients cannot be animated with CSS transitions, but you can animate background-position or background-size to create movement effects