CSS Background Gradients - Linear, Radial & Conic

What Are CSS Gradients?

CSS gradients are smooth transitions between two or more colors. They're created dynamically by the browser, making them resolution-independent and perfect for responsive design. Unlike images, gradients load instantly and can be easily customized.

Linear Gradients

Transitions along a straight line

linear-gradient()

Radial Gradients

Transitions from a center point

radial-gradient()

Conic Gradients

Transitions around a center point

conic-gradient()

Linear Gradients

Linear gradients transition colors along a straight line. They're the most commonly used gradient type and perfect for creating depth in black backgrounds.

Basic Syntax

/* Basic syntax */
background: linear-gradient(direction, color-stop1, color-stop2, ...);

/* Direction options */
background: linear-gradient(to bottom, #000, #333);      /* Top to bottom */
background: linear-gradient(to right, #000, #111);       /* Left to right */
background: linear-gradient(45deg, #000, #222);          /* Angle in degrees */
background: linear-gradient(0.25turn, #000, #333);       /* Angle in turns */

/* Multiple color stops */
background: linear-gradient(to right, #000 0%, #111 50%, #000 100%);

Black Gradient Examples

Vertical Fade

background: linear-gradient(to bottom, #000, #333);

Diagonal Wave

background: linear-gradient(135deg, #000 0%, #222 50%, #000 100%);

Fade to Transparent

background: linear-gradient(to right, #000, transparent);

Striped Pattern

background: linear-gradient(45deg, 
  #000 25%, #111 25%, #111 50%, 
  #000 50%, #000 75%, #111 75%);

Advanced Techniques

Smooth Black Gradient with Multiple Stops

background: linear-gradient(180deg, 
    #000 0%, 
    #0a0a0a 20%, 
    #111 40%, 
    #0a0a0a 60%, 
    #000 100%
);

Repeating Linear Gradient

background: repeating-linear-gradient(
    45deg,
    #000,
    #000 10px,
    #111 10px,
    #111 20px
);

Radial Gradients

Radial gradients transition colors from a center point outward. They're perfect for creating spotlight effects, vignettes, and depth in black backgrounds.

Basic Syntax

/* Basic syntax */
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

/* Shape options */
background: radial-gradient(circle, #000, #333);         /* Circle shape */
background: radial-gradient(ellipse, #000, #111);        /* Ellipse shape (default) */

/* Size keywords */
background: radial-gradient(circle closest-side, #000, #333);
background: radial-gradient(ellipse farthest-corner, #000, #111);

/* Position */
background: radial-gradient(circle at center, #000, #333);
background: radial-gradient(circle at top left, #000, #111);
background: radial-gradient(circle at 20% 80%, #000, #222);

Black Radial Gradient Examples

Center Spotlight

background: radial-gradient(circle, #333 0%, #000 70%);

Top Glow

background: radial-gradient(ellipse at top, #222 0%, #000 50%);

Corner Light

background: radial-gradient(circle at 30% 30%, #333, #000 50%);

Circle Cutout

background: radial-gradient(circle closest-side, 
  transparent 50%, #000 50%);

Vignette Effects

Classic Vignette

.vignette {
    background: 
        radial-gradient(
            ellipse at center, 
            transparent 0%, 
            rgba(0,0,0,0.4) 40%, 
            rgba(0,0,0,0.8) 100%
        ),
        #222;
}

Multiple Radial Gradients

background: 
    radial-gradient(circle at 20% 50%, 
        rgba(255,255,255,0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, 
        rgba(255,255,255,0.05) 0%, transparent 50%),
    #000;

Conic Gradients

Conic gradients transition colors around a center point, creating pie-chart-like effects. They're great for creating unique black background patterns.

Basic Syntax

/* Basic syntax */
background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

/* Simple conic gradient */
background: conic-gradient(#000, #333, #000);

/* With starting angle */
background: conic-gradient(from 45deg, #000, #111, #000);

/* With position */
background: conic-gradient(at 30% 30%, #000, #333, #000);

/* Complete syntax */
background: conic-gradient(from 90deg at 25% 25%, #000 0deg, #333 180deg, #000 360deg);

Black Conic Gradient Examples

Simple Sweep

background: conic-gradient(#000, #333, #000);

Quadrant Pattern

background: conic-gradient(from 45deg, 
  #000 0deg, #111 90deg, #000 180deg, 
  #111 270deg, #000 360deg);

Repeating Rays

background: repeating-conic-gradient(
  #000 0deg 30deg, 
  #111 30deg 60deg
);

Off-Center Spiral

background: conic-gradient(at 40% 40%, 
  #000, #222 20%, #000 40%, 
  #222 60%, #000 80%, #222);

Browser Support: Conic gradients have good modern browser support but may require fallbacks for older browsers. Always provide a solid background-color fallback.

Complex Black Gradient Patterns

Combine multiple gradients to create sophisticated black background patterns without using images.

Carbon Fiber Pattern

.carbon-fiber {
    background: 
        linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
        linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
        linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
        linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
        linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
        linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, 
            transparent 50%, transparent 75%, #242424 75%, #242424);
    background-color: #131313;
    background-size: 20px 20px;
}

Mesh Gradient

.mesh-gradient {
    background-color: #000;
    background-image: 
        radial-gradient(at 47% 33%, #212121 0%, transparent 59%),
        radial-gradient(at 82% 65%, #111111 0%, transparent 55%);
}

Dotted Grid

.dotted-grid {
    background-color: #000;
    background-image: 
        radial-gradient(circle, #333 1px, transparent 1px);
    background-size: 20px 20px;
}

Diagonal Stripes

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

Performance & Optimization

CSS gradients are generally performant, but following best practices ensures optimal rendering.

Performance Benefits

No HTTP requests (unlike images)
Infinitely scalable (resolution-independent)
Smaller file size than images
Easy to modify with CSS variables
Hardware accelerated in modern browsers

Optimization Tips

Use simple gradients when possible
Avoid too many color stops
Minimize gradient layers
Use solid color fallbacks
Test performance on mobile devices

CSS Variables for Dynamic Gradients

:root {
    --gradient-start: #000;
    --gradient-end: #333;
    --gradient-angle: 135deg;
}

.dynamic-gradient {
    background: linear-gradient(
        var(--gradient-angle), 
        var(--gradient-start), 
        var(--gradient-end)
    );
}

/* Dark mode adjustment */
@media (prefers-color-scheme: dark) {
    :root {
        --gradient-start: #000;
        --gradient-end: #111;
    }
}

Gradient Tools & Resources

CSS Gradient Syntax

Quick reference for gradient syntax:

deg - Degrees (0-360)
turn - Full rotation (0-1)
rad - Radians
% - Position along gradient

Color Stop Positions

Control gradient transitions:

/* Smooth transition */
background: linear-gradient(#000, #333);

/* Sharp transition */
background: linear-gradient(
    #000 50%, #333 50%
);

Gradient Debugging

Tips for troubleshooting:

Check browser compatibility
Verify color values
Test with solid colors first
Use browser DevTools

Try Our Interactive Generator

Create custom black gradients with our visual tool

Open Gradient Generator

Browser Compatibility

Gradient Type	Chrome	Firefox	Safari	Edge	Mobile Support
linear-gradient	26+	16+	6.1+	12+	Excellent
radial-gradient	26+	16+	6.1+	12+	Excellent
conic-gradient	69+	83+	12.1+	79+	Good
repeating-*-gradient	26+	16+	6.1+	12+	Excellent

Fallback Strategy

/* Fallback approach */
.gradient-bg {
    /* Fallback for old browsers */
    background: #000;
    
    /* Modern browsers */
    background: linear-gradient(135deg, #000 0%, #333 100%);
}

/* Feature detection */
@supports (background: conic-gradient(#000, #333)) {
    .conic-bg {
        background: conic-gradient(#000, #333, #000);
    }
}

Black Gradient Gallery

Inspiring examples of black gradients in web design

Hero Section Gradient

Subtle depth for hero sections

Card Background

Elevated card effect

Button Gradient

Interactive button style

Text Gradient

Gradient text effect

What Are CSS Gradients?

Linear Gradients

Radial Gradients

Conic Gradients

Linear Gradients

Basic Syntax

Black Gradient Examples

Vertical Fade

Diagonal Wave

Fade to Transparent

Striped Pattern

Advanced Techniques

Smooth Black Gradient with Multiple Stops

Repeating Linear Gradient

Radial Gradients

Basic Syntax

Black Radial Gradient Examples

Center Spotlight

Top Glow

Corner Light

Circle Cutout

Vignette Effects

Classic Vignette

Multiple Radial Gradients

Conic Gradients

Basic Syntax

Black Conic Gradient Examples

Simple Sweep

Quadrant Pattern

Repeating Rays

Off-Center Spiral

Complex Black Gradient Patterns

Carbon Fiber Pattern

Mesh Gradient

Dotted Grid

Diagonal Stripes

Performance & Optimization

Performance Benefits

Optimization Tips

CSS Variables for Dynamic Gradients

Gradient Tools & Resources

CSS Gradient Syntax

Color Stop Positions

Gradient Debugging

Try Our Interactive Generator

Browser Compatibility

Fallback Strategy

Black Gradient Gallery

Hero Section Gradient

Card Background

Button Gradient

Text Gradient

Related Resources

All Background Properties

Black Background CSS

Responsive Backgrounds

CSS Background Cheat Sheet