CSS Gradients

CSS gradients create smooth transitions between colors — no images required. They’re crisp at any resolution, fast to render, and incredibly versatile for backgrounds, buttons, hero sections, and decorative effects.

Linear Gradients

Colors blend along a straight line:

.box {
    background: linear-gradient(to right, #3498db, #e74c3c);
}

Direction Options

background: linear-gradient(to right, blue, red);            /* Left → Right */
background: linear-gradient(to bottom, blue, red);           /* Top → Bottom (default) */
background: linear-gradient(to bottom right, blue, red);     /* Diagonal */
background: linear-gradient(45deg, blue, red);               /* Custom angle */
background: linear-gradient(135deg, blue, red);              /* Top-left → bottom-right */

Angle reference:

   0deg ↑
       │
270deg ← + → 90deg
       │
       ↓ 180deg

Multiple Color Stops

.rainbow {
    background: linear-gradient(
        to right,
        #ff0000 0%,
        #ffaa00 16%,
        #ffff00 33%,
        #00ff00 50%,
        #00ffff 66%,
        #0000ff 83%,
        #ff00ff 100%
    );
}

Hard Color Stops

If two stops are at the same position, you get a hard transition (no blending):

.split {
    background: linear-gradient(
        to right,
        #3498db 50%,
        #e74c3c 50%
    );
    /* Half blue, half red — no fade */
}

Great for split-color backgrounds and stripes:

.stripes {
    background: linear-gradient(
        45deg,
        #ddd 25%,
        white 25%,
        white 50%,
        #ddd 50%,
        #ddd 75%,
        white 75%
    );
    background-size: 40px 40px;
}

Radial Gradients

Colors blend outward from a center point:

.spotlight {
    background: radial-gradient(circle, #ffeb3b, #f44336);
}

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

Custom Position and Size

.box {
    background: radial-gradient(
        circle at top left,
        white,
        #3498db
    );
}

.box {
    background: radial-gradient(
        circle 100px at 50% 50%,
        red,
        transparent
    );
}

Conic Gradients

Colors rotate around a center point — perfect for pie charts and color wheels:

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

.pie-chart {
    background: conic-gradient(
        #3498db 0deg 90deg,      /* 25% blue */
        #e74c3c 90deg 234deg,    /* 40% red */
        #2ecc71 234deg 360deg    /* 35% green */
    );
    border-radius: 50%;
}

Repeating Gradients

Tile a gradient pattern:

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

Gradient Text

Combine background-clip and transparent text color:

.gradient-text {
    background: linear-gradient(45deg, #3498db, #e74c3c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

Layered Gradients

Stack multiple gradients with transparency:

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

Dark overlay on top of an image — text becomes readable.

Practical Examples

Modern Button Gradient

.btn-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

Hero Section

.hero {
    background: linear-gradient(
        135deg,
        #667eea 0%,
        #764ba2 100%
    );
    min-height: 100vh;
    display: grid;
    place-items: center;
    color: white;
    text-align: center;
}

Fade-to-Bottom Overlay

.image-overlay {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 50%,
        rgba(0,0,0,0.8) 100%
    );
}

Tip: Use gradient generators like CSS Gradient or UI Gradients to discover beautiful color combinations — then customize them in your CSS.

What’s Next?

Gradients add color depth. Shadows add the illusion of depth and light. Let’s master box-shadow and text-shadow.

← Previous: CSS Transforms Next: CSS Shadow Effects →