CSS Background Patterns

Last reviewed on 2026-10-03

Create beautiful patterns with pure CSS - no images needed!

CSS background patterns allow you to create complex, repeating designs using only CSS gradients and properties. From simple stripes to intricate geometric patterns, you can achieve stunning visual effects without the need for image files, resulting in faster load times and infinite scalability.

Why Use CSS Patterns?

Performance: No image requests, smaller file sizes
Scalability: Resolution-independent, perfect for retina displays
Customization: Easy to modify colors, sizes, and angles
Dynamic: Can be animated or changed with CSS variables
Browser Support: Works in all modern browsers
Maintenance: No need to manage image assets

Basic Pattern Techniques

The Foundation: Repeating Gradients

Most CSS patterns are created using repeating-linear-gradient or repeating-radial-gradient:

/* Basic repeating pattern */
background: repeating-linear-gradient(
    45deg,                    /* angle */
    #000,                    /* first color */
    #000 10px,               /* first color stop */
    #333 10px,               /* second color start */
    #333 20px                /* second color stop */
);

Stripe Patterns

Horizontal Stripes

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

Vertical Stripes

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

Diagonal Stripes

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

Dot Patterns

Simple Dots

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

Polka Dots

                                    background-color: #000;
background-image: radial-gradient(circle, #ff006e 20%, transparent 20%);
background-size: 40px 40px;
                                

Gradient Dots

                                    background-color: #000;
background-image: 
    radial-gradient(circle at 20% 80%, rgba(255, 0, 110, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(131, 56, 236, 0.4) 0%, transparent 50%);
background-size: 100px 100px;
                                

Grid Patterns

Simple Grid

                                    background-color: #000;
background-image: 
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
                                

Blueprint Grid

                                    background-color: #002b5c;
background-image: 
    linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
                                

Black Background Grid, Dot and Square Patterns

These patterns sit on a pure #000 background and use low-contrast white or a few accent colours, so they work behind dark-mode UI. Each one is a single background-color plus gradient layers; remember that the first layer listed is painted on top.

Black Grid (repeating-linear-gradient)

                                    background-color: #000;
background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 24px);
                                

Each gradient draws a 1px line every 24px; one runs horizontally, the other vertically. No background-size is needed because the gradient itself repeats.

Black Dot Grid (radial-gradient)

                                    background-color: #000;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 1.5px, transparent 2px);
background-size: 18px 18px;
                                

background-size sets the tile, so it controls the distance between dots. The 0.5px gap between the two colour stops softens the dot edge.

Black Square Tiles

                                    background-color: #000;
background-image:
    linear-gradient(90deg, #000 4px, transparent 4px), /* top layer: vertical gaps */
    linear-gradient(#000 4px, #1f1f1f 4px);            /* bottom layer: horizontal gaps + square fill */
background-size: 24px 24px;
                                

Every 24px tile has a 4px black gap on its top and left edges, leaving a 20px dark-grey square.

Coloured Squares in One Corner

                                    background-color: #000;
background-image:
    linear-gradient(#ff006e, #ff006e),
    linear-gradient(#8338ec, #8338ec),
    linear-gradient(#3a86ff, #3a86ff),
    linear-gradient(#06d6a0, #06d6a0);
background-size: 16px 16px;      /* every square is 16px */
background-repeat: no-repeat;    /* one square per layer */
background-position:             /* 24px apart: 16px square + 8px gap */
    right 16px top 16px,
    right 40px top 16px,
    right 16px top 40px,
    right 40px top 40px;
                                

A flat linear-gradient acts as a solid-colour image. With no-repeat, each layer draws a single square, and the edge-offset syntax of background-position places them evenly from the top-right corner.

Geometric Patterns

Checkerboard

                                    background-color: #000;
background-image: 
    linear-gradient(45deg, #333 25%, transparent 25%),
    linear-gradient(-45deg, #333 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #333 75%),
    linear-gradient(-45deg, transparent 75%, #333 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
                                

Chevron

                                    background-color: #000;
background-image: 
    linear-gradient(135deg, #333 25%, transparent 25%),
    linear-gradient(225deg, #333 25%, transparent 25%),
    linear-gradient(45deg, #333 25%, transparent 25%),
    linear-gradient(315deg, #333 25%, transparent 25%);
background-position: 10px 0, 10px 0, 0 0, 0 0;
background-size: 20px 20px;
                                

Diamonds

                                    background-color: #000;
background-image: 
    linear-gradient(45deg, transparent 30%, #333 30%, #333 70%, transparent 70%),
    linear-gradient(135deg, transparent 30%, #333 30%, #333 70%, transparent 70%);
background-size: 30px 30px;
                                

Advanced Patterns

Hexagons

Complex hexagonal pattern using multiple gradients

                                    background-color: #000;
background-image:
    linear-gradient(30deg, #111 12%, transparent 12.5%, transparent 87%, #111 87.5%, #111),
    linear-gradient(150deg, #111 12%, transparent 12.5%, transparent 87%, #111 87.5%, #111),
    linear-gradient(30deg, #111 12%, transparent 12.5%, transparent 87%, #111 87.5%, #111),
    linear-gradient(150deg, #111 12%, transparent 12.5%, transparent 87%, #111 87.5%, #111),
    linear-gradient(60deg, #222 25%, transparent 25.5%, transparent 75%, #222 75%, #222),
    linear-gradient(60deg, #222 25%, transparent 25.5%, transparent 75%, #222 75%, #222);
background-size: 80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
                                

Carbon Fiber

Realistic carbon fiber texture effect

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

Animated Pattern

Moving diagonal stripes animation

                                    background-color: #000;
background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.05) 10px, rgba(255,255,255,.05) 20px);
background-size: 200% 200%;
animation: patternMove 20s linear infinite;

@keyframes patternMove {
    0% { background-position: 0 0; }
    100% { background-position: 100% 100%; }
}
                                

Creating Custom Patterns

Pattern Builder

Pattern Type:

Primary Color:

Secondary Color:

Pattern Size (px): 20px

Angle (stripes only): 45°

/* Your pattern CSS will appear here */

Pattern Combinations

You can layer multiple patterns for more complex effects:

/* Layered pattern example */
.complex-pattern {
    background: 
        /* Dots layer */
        radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        /* Grid layer */
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        /* Base color */
        #000;
    background-size: 50px 50px, 25px 25px, 25px 25px;
    background-position: 0 0, 0 0, 0 0;
}

Performance Considerations

⚡ Performance Tips

Limit Gradients: Use fewer gradients for better performance
Simple Patterns: Complex patterns can impact rendering
Test on Mobile: Mobile devices may struggle with complex patterns
Use CSS Variables: Makes patterns easier to customize
Consider SVG: For very complex patterns, SVG might be better

CSS Variables for Dynamic Patterns

/* Dynamic pattern with CSS variables */
.dynamic-pattern {
    --pattern-color-1: #000;
    --pattern-color-2: #333;
    --pattern-size: 20px;
    --pattern-angle: 45deg;
    
    background: repeating-linear-gradient(
        var(--pattern-angle),
        var(--pattern-color-1),
        var(--pattern-color-1) calc(var(--pattern-size) / 2),
        var(--pattern-color-2) calc(var(--pattern-size) / 2),
        var(--pattern-color-2) var(--pattern-size)
    );
}

/* Easy theme switching */
.dynamic-pattern.light-theme {
    --pattern-color-1: #fff;
    --pattern-color-2: #f0f0f0;
}

/* Responsive patterns */
@media (max-width: 768px) {
    .dynamic-pattern {
        --pattern-size: 15px;
    }
}

Common Use Cases

Pattern Applications

🎨 Backgrounds

Create textured backgrounds without images

📱 UI Elements

Add subtle patterns to cards and sections

🎯 Loading Screens

Animated patterns for loading indicators

🖼️ Overlays

Pattern overlays for image effects

Browser Compatibility

Feature	Support	Notes
linear-gradient	✅ All browsers	Unprefixed in all current browsers (IE10+)
repeating-linear-gradient	✅ All browsers	Unprefixed in all current browsers (IE10+)
radial-gradient	✅ All browsers	Unprefixed in all current browsers (IE10+)
conic-gradient	✅ All current browsers	Not supported in Internet Explorer
Multiple backgrounds	✅ All browsers	IE9+

Conclusion

CSS background patterns offer a powerful, performant way to add visual interest to your designs without relying on image files. From simple stripes to complex geometric designs, the possibilities are endless. By mastering gradient techniques and understanding how to layer multiple backgrounds, you can create unique patterns that enhance your web projects while maintaining fast load times and infinite scalability.

Ready to Create Amazing Patterns?

Start using CSS patterns in your projects today!

Pattern Generator Black Grid Backgrounds Animated Patterns