Creating visually engaging backgrounds in web design doesn’t always require images or heavy assets. With pure CSS, you can generate stripes, grids, checkerboards, and even polka dots using gradient functions. These patterns are lightweight, scalable, and adaptable to any screen size, making them perfect for modern responsive design.
Whether you’re a beginner experimenting with CSS gradients or an experienced developer optimising performance, background patterns offer a flexible way to add depth and texture to your site. The best part? They load instantly, without relying on external files.
In this guide, we’ll explore how to create vertical, horizontal, and diagonal lines, grids, and checkerboard patterns using only CSS. You’ll also find practical code snippets, variations, and FAQs to help you master this powerful design technique.
What Are CSS Background Patterns?
CSS background patterns are visual effects created using gradient functions such as linear-gradient(), repeating-linear-gradient(), and repeating-conic-gradient(). Instead of relying on static images, CSS generates these patterns dynamically, ensuring:
- Better performance: No extra HTTP requests.
- Scalability: Crisp at any resolution or zoom level.
- Customisation: Easily adjust colours, spacing, and angles.
How Do You Create Vertical Stripes in CSS?
Vertical stripes are one of the simplest patterns to create.
body {
background: repeating-linear-gradient(
to right,
#808080 0 10px,
#ffffff 10px 20px
);
}This produces alternating gray and white vertical stripes where each stripe is 10px wide.
How Do You Add Horizontal Stripes with CSS?
To switch from vertical to horizontal, simply change the gradient direction:
body {
background: repeating-linear-gradient(
to bottom,
#808080 0 10px,
#ffffff 10px 20px
);
}This results in horizontal stripes, great for separating content sections.
How to Make Diagonal Stripes (45° or 135°)?
Diagonal lines can give your design a dynamic look.
/* 45-degree diagonal stripes */
body {
background: repeating-linear-gradient(
45deg,
#808080 0 10px,
#ffffff 10px 20px
);
}Adjust the angle to 135deg for the opposite direction.
Can You Create a Checkerboard Pattern in CSS?
Yes! Using repeating-conic-gradient(), you can build a checkerboard.
body {
background: repeating-conic-gradient(
#808080 0% 25%,
#ffffff 0% 50%
);
background-size: 50px 50px;
}The result is a tiled checkerboard pattern—perfect for placeholders or retro-inspired designs.
How to Make a Grid Pattern (Graph Paper Style)?
Grids are useful for structured layouts or subtle textures.
body {
background: repeating-linear-gradient(
to right,
#808080 0 1px,
transparent 1px 50px
),
repeating-linear-gradient(
to bottom,
#808080 0 1px,
transparent 1px 50px
);
}This creates thin gray lines spaced 50px apart, like graph paper.
Can CSS Create Dotted Backgrounds?
Yes! By combining radial gradients, you can simulate a polka-dot effect.
body {
background:
radial-gradient(#808080 20%, transparent 21%) 0 0,
radial-gradient(#808080 20%, transparent 21%) 25px 25px;
background-size: 50px 50px;
}This produces evenly spaced circular dots.
Advanced Variations: Crosshatch and Diagonal Grids
For a woven or plaid-like effect, overlap gradients at different angles:
body {
background: repeating-linear-gradient(
45deg,
#808080 0 5px,
transparent 5px 20px
),
repeating-linear-gradient(
-45deg,
#808080 0 5px,
transparent 5px 20px
);
}Creates a crosshatch pattern often used in textured backgrounds.
Smooth Wave Pattern (Sine-Like Curves)
For smooth waves, we use radial gradients layered with a clever background-size:
body {
background:
radial-gradient(circle at 0 100%, #808080 20%, transparent 21%) repeat-x,
radial-gradient(circle at 50% 100%, #808080 20%, transparent 21%) repeat-x;
background-size: 50px 50px;
}This produces a smooth scalloped/wavy edge pattern.
If you want more “flowing” curves, you can animate background-position to simulate a moving sine wave.
Sharp Wave (Zig-Zag / Chevron) Pattern
For sharp, cornered waves, use a repeating-linear-gradient at an angle:
body {
background: repeating-linear-gradient(
-45deg,
#808080 0 10px,
#ffffff 10px 20px
);
background-size: 40px 40px;
}This generates a zig-zag / chevron-style pattern.
Advanced: True Wavy Stripes with conic-gradient
body {
background: repeating-conic-gradient(
from 0deg,
#808080 0 10deg,
#ffffff 10deg 20deg
);
background-size: 60px 60px;
}This creates circular wave-like ripples radiating from the center.
Key Takeaways
- Use
repeating-linear-gradient()for stripes (vertical, horizontal, diagonal). - Use
repeating-conic-gradient()for checkerboards and pie-slice patterns. - Use
radial-gradient()for dots and circular designs. - Use linear gradients for sharp zig-zags.
- Patterns are lightweight, scalable, and customizable compared to images.
Frequently Asked Questions (FAQs)
1. Are CSS patterns better than background images?
Yes, CSS patterns are faster to load, scalable, and customizable. Images may look pixelated on high-resolution displays.
2. Do CSS background patterns work on all browsers?
Most modern browsers support gradient functions. For legacy browsers, fallback colors or background images may be required.
3. Can I animate CSS background patterns?
Yes! You can use CSS animations or keyframes to move gradients, creating effects like moving stripes or shifting grids.
4. Can I use transparent colors in patterns?
Absolutely. Use rgba() or transparent to layer patterns over background colors or images.
With these techniques, you can replace heavy image assets with clean, responsive, and customizable CSS background patterns—ideal for both performance and design flexibility.
