How to create a background pattern with CSS

Creating background patterns using CSS is a lightweight and flexible method that can be achieved through gradients, pseudo-elements or multi-layer backgrounds; first, you can create stripes or complex gradients through repeating-linear-gradient(), and then use multi-background overlay to achieve polka dots or checkerboard effects, and then add noise texture overlays through pseudo-elements. Finally, you need to consider responsiveness and accessibility to ensure high performance and readability, so that you can use CSS to generate high-definition patterns without pictures.

Creating a background pattern with CSS is a lightweight and flexible way to add visual interest to your web pages without relying on images. You can generate repeating patterns using pure CSS with gradients, pseudo-elements, or even multiple backgrounds. Here's how to do it effectively.

1. Use CSS Gradients for Simple Patterns

CSS gradients are the most common way to create subtle or complex background patterns. You can use linear-gradient() or repeating-linear-gradient() to build patterns like stripes, checks, or waves.

Example: Diagonal Stripes

 .striped-bg {
  background: repeating-linear-gradient(
    45deg,
    #f0f0f0,
    #f0f0f0 10px,
    #ccc 10px,
    #ccc 20px
  );
}

This creates diagonal stripes by repeating a 20px pattern—10px light gray, 10px dark gray—at a 45-degree angle.

Example: Checkerboard Pattern

 .checkerboard-bg {
  background: 
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(45deg, #ccc 75%, transparent 75%),
    linear-gradient(45deg, transparent 25%, #ccc 25%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
}

This uses multiple layered gradients to simulate a checkerboard. Each gradient contributes part of the black-and-white tile effect.

2. Combine Multiple Backgrounds for Complex Effects

You can layer several background images (or gradients) on a single element. This is useful for creating textures like polka dots, grids, or woven effects.

Example: Polka Dots

 .polka-bg {
  background: radial-gradient(#333 2px, transparent 2px);
  background-size: 20px 20px;
  background-color: #f0f0f0;
}

This creates small dark circles (dots) on a light background. Adjust the size and spacing by changing the background-size and radius.

3. Use Pseudo-elements for Overlay Patterns

Sometimes you want a semi-transparent pattern overlay on top of an image or color. You can use ::before or ::after to layer a pattern without affecting the main content.

Example: Subtle Noise Overlay

 .noise-bg {
  position: relative;
  background: url('your-image.jpg');
}

.noise-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: 0.1;
  pointer-events: none;
}

This adds a faith grain effect over any background, enhancing depth without distraction.

4. Responsive and Accessible Considerations

• Performance : CSS patterns are lightweight and scale well, unlike image assets.
• Contrast : Ensure text remains readable over the pattern. Use semi-transparent overlays if needed.
• Fallbacks : Always test how the pattern looks on different screen sizes and in dark mode.

You can also generate patterns using online tools like CSS Gradient or Lea Verou's Pattern CSS , then customize them.

Basically, with a bit of creativity and background-size , gradient , and layering, you can create almost any pattern—stripes, dots, checks, bricks, waves—entirely in CSS. No images required, and everything stays crisp at any resolution.

The above is the detailed content of How to create a background pattern with CSS. For more information, please follow other related articles on the PHP Chinese website!