Backgrounds, Patterns & Masks

Chapter 15: Backgrounds, Patterns & Masks

Chapter 4 introduced the basics of color and backgrounds. This chapter pushes those boundaries into advanced territory. You will learn how to create repeating patterns, use CSS masks to "punch holes" in elements, and master the art of layered background effects that create depth without needing heavy image files.

1. Repeating Gradients and Patterns

By using repeating-linear-gradient and repeating-radial-gradient, you can create infinite patterns like stripes, grids, and textures. These are mathematically generated by the browser, making them much faster than loading a large image file.

/* Diagonal Stripes */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #f8fafc,
    #f8fafc 10px,
    #e2e8f0 10px,
    #e2e8f0 20px
  );
}

/* Blueprint Grid */
.grid {
  background-color: #1e40af;
  background-image: 
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

2. Background Blend Modes

background-blend-mode allows you to mix a background image with a background color or another image, similar to layers in Photoshop. It defines the "math" used to combine pixels from different layers.

  • multiply: Multiplies the colors, usually resulting in a darker color. Great for color-tinting photos.
  • screen: The opposite of multiply; usually results in a lighter color.
  • overlay: Combines multiply and screen modes. It preserves highlights and shadows of the image while applying the background color.
.tinted-hero {
  background-image: url("city.jpg");
  background-color: #2563eb;
  background-blend-mode: multiply;
}
Base ColorPattern LayerBlended Result

3. Masking: Shaping the View

mask-image works like a stencil. Instead of defining what is visible via coordinates (like clip-path), it uses an image or gradient. Black or opaque areas in the mask make the element visible, while Transparent areas hide it.

.fading-image {
  mask-image: linear-gradient(to right, black, transparent);
  -webkit-mask-image: linear-gradient(to right, black, transparent);
}
Source Element+Gradient Mask=Faded Result

4. Glassmorphism and Backdrop Filters

The "glass" effect is one of the most popular modern design trends. It is achieved using backdrop-filter: blur(), which blurs the content underneath the element, paired with a semi-transparent background color.

.glass-panel {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 1.5rem;
}
Glass SurfaceBlur is applied to the background visible through this panel

5. Advanced Layering: The "Mesh" Effect

Modern background design often involves 3 or more layers. By layering radial gradients with different positions and colors, you can create a "Mesh Gradient" effect that looks like professional liquid art.

.mesh-gradient {
  background-color: #4158D0;
  background-image: 
    radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
    radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), 
    radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
}

6. Practical Layered Surface

.modern-surface {
  background: 
    /* Layer 1: A subtle glow in the top corner */
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.1), transparent 40%),
    /* Layer 2: A very faint grid */
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px) 0 0 / 20px 20px,
    /* Layer 3: The base color */
    #f8fafc;
}

7. Debugging Checklist

  1. Is the background blend mode not working? (Check if you have both a background-image and a background-color).
  2. Is the mask invisible? (Check browser prefixes like -webkit-mask-image).
  3. Is backdrop-filter not showing? (Ensure the element has a semi-transparent background).
  4. Are multiple background layers in the wrong order? (The first one listed is the "top" layer).
  5. Is the background-size causing the pattern to look blurry or distorted?
PreviousNext Chapter