CSS Gradients — linear, radial, conic with Examples

Types of CSS Gradients

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;
}

Previous Next

CSS Gradients — linear, radial, conic with Examples

Types of CSS Gradients

Level Up Your Css Skills

Popular Tutorials

Ready to Level Up Your Skills?