CSS Gradients linear, radial, conic

Types of CSS Gradients

CSS gradients create smooth color transitions without image files. They are useful for buttons, hero sections, overlays, loading skeletons, charts, decorative borders, and subtle depth.

Gradients are generated by the browser, so they scale cleanly at any size. The main challenge is readability: text over a gradient still needs enough contrast, and decorative gradients should not distract from the content.

Every gradient is used as an image value, usually through background or background-image. A gradient does not require a real image file; CSS calculates the color transition directly.

linear-gradient() - colors transition along a straight line
radial-gradient() - colors radiate from a center point
conic-gradient() - colors rotate around a center point
repeating-*-gradient() - repeating versions of the above

Linear Gradients

/* linear-gradient(direction, color1, color2, ...) */

/* Direction: to right, to bottom, to top left, 45deg, etc. */
.grad-right  { background: linear-gradient(to right, #667eea, #764ba2); }
.grad-bottom { background: linear-gradient(to bottom, #f093fb, #f5576c); }
.grad-angle  { background: linear-gradient(135deg, #43e97b, #38f9d7); }

/* Multiple color stops */
.rainbow {
    background: linear-gradient(
        to right,
        red, orange, yellow, green, blue, indigo, violet
    );
}

/* Color stops with positions */
.sharp-transition {
    background: linear-gradient(
        to right,
        #3498db 0%, #3498db 50%,  /* solid blue for first half */
        #e74c3c 50%, #e74c3c 100% /* solid red for second half */
    );
}

/* Transparent gradient - image overlay */
.image-fade {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.7) 100%
    );
}

/* Gradient text */
.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: bold;
}

/* Repeating linear gradient - stripes */
.stripes {
    background: repeating-linear-gradient(
        45deg,
        #f0f0f0 0px, #f0f0f0 10px,
        #ddd 10px, #ddd 20px
    );
}

Radial and Conic Gradients

/* radial-gradient(shape size at position, colors) */
.radial-basic {
    background: radial-gradient(circle, #3498db, #2c3e50);
}

/* Ellipse (default shape) */
.radial-ellipse {
    background: radial-gradient(ellipse at top, #e0c3fc, #8ec5fc);
}

/* Position */
.radial-corner {
    background: radial-gradient(circle at top right, #f093fb, #f5576c);
}

/* Size keywords: closest-side, farthest-side, closest-corner, farthest-corner */
.radial-size {
    background: radial-gradient(circle closest-side at 30% 50%, #43e97b, transparent);
}

/* Spotlight effect */
.spotlight {
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255,255,255,0.3) 0%,
        transparent 60%
    ),
    #1a1a2e;
}

/* conic-gradient - colors rotate around center */
.pie-chart {
    background: conic-gradient(
        #e74c3c 0deg 120deg,    /* 33% red */
        #3498db 120deg 240deg,  /* 33% blue */
        #2ecc71 240deg 360deg   /* 33% green */
    );
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

/* Color wheel */
.color-wheel {
    background: 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%;
}

/* Checkerboard pattern */
.checkerboard {
    background:
        conic-gradient(#ccc 90deg, white 90deg 180deg, #ccc 180deg 270deg, white 270deg)
        0 0 / 40px 40px;
}

Gradient Stops and Overlays

Color stops control where each color starts and ends. If two stops share the same position, the transition becomes sharp instead of smooth. This is useful for stripes, progress bars, split backgrounds, and simple chart-like visuals.

Use direction keywords like to right or angles like 135deg for linear gradients.
Use radial gradients for spotlights, glows, and circular fades.
Use conic gradients for pie-chart style effects and color wheels.
Layer a transparent gradient over an image to improve text readability.

Readable image overlay with layered gradients

.hero {
    color: white;
    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.72)
        ),
        url("hero.jpg") center / cover no-repeat;
}