CSS Gradients

Paint the web with smooth color transitions and creative patterns

Linear Gradients

Create smooth transitions between colours along a straight line. Control direction, colour stops, and create stunning effects.

Basic Linear Gradients

Two Colour

Multi Colour

Diagonal

/* Two colour gradient */
.gradient {
    background: linear-gradient(
        to right, 
        #3b82f6, 
        #8b5cf6
    );
}

/* Multi colour */
.rainbow {
    background: linear-gradient(
        to right,
        #ff0000,
        #ff8800,
        #ffff00,
        #00ff00,
        #0088ff,
        #8800ff
    );
}

/* Diagonal */
.diagonal {
    background: linear-gradient(
        45deg,
        #f06,
        #48f
    );
}

Colour Stops

Custom Stops

Hard Stops

Repeating

/* Custom colour stops */
.custom-stops {
    background: linear-gradient(
        to right,
        #3b82f6 0%,
        #3b82f6 20%,
        #8b5cf6 80%,
        #8b5cf6 100%
    );
}

/* Hard stops (no blend) */
.hard-stops {
    background: linear-gradient(
        to right,
        #f06 50%,
        #48f 50%
    );
}

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

Advanced Techniques

Text Overlay

Animated

Mesh Effect

/* Overlay gradient */
.overlay {
    background: 
        linear-gradient(
            rgba(0,0,0,0.7),
            rgba(0,0,0,0.3)
        ),
        url('image.jpg');
}

/* Animated gradient */
.animated {
    background: linear-gradient(
        -45deg,
        #ee7752,
        #e73c7e,
        #23a6d5,
        #23d5ab
    );
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

/* Multiple gradients (mesh) */
.mesh {
    background:
        linear-gradient(45deg, #f06 30%, transparent 30%),
        linear-gradient(-45deg, #48f 60%, transparent 60%),
        linear-gradient(90deg, #fd0 20%, transparent 20%);
}

Radial Gradients

Create circular or elliptical gradients that radiate from a central point. Perfect for spotlights, bubbles, and organic shapes.

Basic Radial Gradients

Circle

Ellipse

Positioned

/* Circle gradient */
.circle {
    background: radial-gradient(
        circle,
        #3b82f6,
        #1e40af
    );
}

/* Ellipse (default) */
.ellipse {
    background: radial-gradient(
        ellipse,
        #ec4899,
        #7c3aed
    );
}

/* Positioned gradient */
.spotlight {
    background: radial-gradient(
        circle at top right,
        #fbbf24,
        #92400e
    );
}

Size & Shape Control

Closest Side

Farthest Corner

Fixed Size

/* Size keywords */
.closest {
    background: radial-gradient(
        circle closest-side,
        #10b981,
        #064e3b
    );
}

.farthest {
    background: radial-gradient(
        ellipse farthest-corner,
        #f59e0b,
        #7c2d12
    );
}

/* Fixed size */
.fixed {
    background: radial-gradient(
        100px 50px at center,
        #8b5cf6,
        #4c1d95
    );
}

Creative Effects

Sunburst

Bubble

Ripple

/* Sunburst effect */
.sunburst {
    background: radial-gradient(
        circle,
        #fbbf24 0%,
        #f59e0b 25%,
        #d97706 50%,
        #92400e 75%,
        #451a03 100%
    );
}

/* Bubble effect */
.bubble {
    background: radial-gradient(
        circle at 30% 30%,
        rgba(255,255,255,0.8),
        rgba(255,255,255,0.4) 30%,
        rgba(59,130,246,0.6)
    );
}

/* Repeating ripple */
.ripple {
    background: repeating-radial-gradient(
        circle,
        #3b82f6,
        #3b82f6 10px,
        #60a5fa 10px,
        #60a5fa 20px
    );
}

Conic Gradients

Create gradients that rotate around a center point. Perfect for pie charts, colour wheels, and unique visual effects.

Basic Conic Gradients

Colour Wheel

Pie Chart

Off-center

/* Colour wheel */
.wheel {
    background: conic-gradient(
        red,
        yellow,
        lime,
        aqua,
        blue,
        magenta,
        red
    );
    border-radius: 50%;
}

/* Pie chart */
.pie {
    background: conic-gradient(
        #3b82f6 0deg 90deg,
        #8b5cf6 90deg 180deg,
        #ec4899 180deg 270deg,
        #f59e0b 270deg
    );
    border-radius: 50%;
}

/* Positioned */
.offset {
    background: conic-gradient(
        from 45deg at 25% 25%,
        #f06,
        #48f,
        #f06
    );
}

Advanced Conic Effects

Checkerboard

Starburst

Spiral

/* Checkerboard */
.checkerboard {
    background: conic-gradient(
        #000 0deg 90deg,
        #fff 90deg 180deg,
        #000 180deg 270deg,
        #fff 270deg
    );
    background-size: 50px 50px;
}

/* Starburst */
.starburst {
    background: repeating-conic-gradient(
        from 0deg,
        #3b82f6 0deg 10deg,
        #1e40af 10deg 20deg
    );
}

/* Spiral effect */
.spiral {
    background: conic-gradient(
        from 0deg at 50% 50%,
        hsl(0deg 100% 50%),
        hsl(180deg 100% 50%),
        hsl(360deg 100% 50%)
    );
    filter: blur(20px);
}

🎨 Want to Create Stunning Patterns?

Ready to take your gradients to the next level? Learn how to create complex patterns, realistic textures, and smooth animations.

Explore Advanced Gradient Patterns →

Continue Your Journey

Gradients mastered! Explore filters for even more visual effects.

🎨

CSS Filters

Apply Instagram-like effects with CSS

🎬

Animations

Combine gradients with motion