CSS blur on background image but not on content

CSS Blur on Background Image, Not on Content

Learn how to apply a blur effect to a background image while keeping the foreground content sharp and readable using modern CSS techniques.

A common design requirement is to use a visually appealing background image, but sometimes a busy or high-contrast image can make foreground content difficult to read. Applying a blur effect to the background image can solve this, enhancing readability without sacrificing the visual appeal of the image. This article will guide you through various CSS methods to achieve this effect, ensuring your content remains crisp and clear.

The Challenge: Blurring Only the Background

The primary challenge arises because CSS filter properties, when applied directly to an element, affect all of its children. If you apply a blur filter to a div containing both a background image and text, the text will also become blurred. To avoid this, we need to separate the background image from the content in a way that allows independent styling.

flowchart TD
    A[Container Element] --> B{Apply Blur Filter?}
    B -->|Yes| C[Background Layer]
    B -->|No| D[Content Layer]
    C --> E[Blurred Background]
    D --> F[Sharp Content]
    E & F --> G[Combined View]

Conceptual flow for separating background and content layers

Method 1: Using a Pseudo-element for the Background

One of the most robust and widely supported methods involves using a pseudo-element (::before or ::after) to hold the background image. This pseudo-element can then be positioned behind the main content and have a blur filter applied to it, leaving the actual content unaffected.

.container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://picsum.photos/id/1015/1000/600'); /* Replace with your image */
  background-size: cover;
  background-position: center;
  filter: blur(8px); /* Adjust blur strength */
  z-index: -1; /* Place behind content */
  transform: scale(1.02); /* Optional: counteract blur edge effect */
}

.content {
  position: relative; /* Ensure content is above pseudo-element */
  z-index: 1;
  text-align: center;
}

h1 {
  font-size: 3em;
  margin-bottom: 10px;
}

p {
  font-size: 1.2em;
}

CSS for blurring background using a pseudo-element

<div class="container">
  <div class="content">
    <h1>Hello, Blurred World!</h1>
    <p>This text remains sharp and readable.</p>
  </div>
</div>

HTML structure for the pseudo-element method

Method 2: Using Separate Elements with background-image

Another approach is to use two distinct div elements: one for the blurred background and another for the content. This method is straightforward and doesn't rely on pseudo-elements, which some developers might find easier to manage for complex layouts.

.wrapper {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.background-blurred {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://picsum.photos/id/1015/1000/600'); /* Replace with your image */
  background-size: cover;
  background-position: center;
  filter: blur(8px);
  transform: scale(1.02);
}

.foreground-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.foreground-content h1 {
  font-size: 3em;
  margin-bottom: 10px;
}

.foreground-content p {
  font-size: 1.2em;
}

CSS for blurring background using separate elements

<div class="wrapper">
  <div class="background-blurred"></div>
  <div class="foreground-content">
    <div>
      <h1>Separate Elements, Clear Content</h1>
      <p>This method also keeps the text sharp.</p>
    </div>
  </div>
</div>

HTML structure for the separate elements method

Considerations and Best Practices

When implementing a blurred background, keep the following in mind:

• Accessibility: Ensure sufficient contrast between your blurred background and foreground text. Even with a blur, some color combinations can be hard to read. Consider adding a semi-transparent overlay (e.g., a background-color with rgba() on the content container or another pseudo-element) to further enhance readability.
• Image Choice: Not all images blur well. Images with strong patterns or very high contrast might still be distracting even when blurred. Experiment with different images.
• Blur Strength: The blur() value in filter: blur(Xpx) should be chosen carefully. Too little blur might not achieve the desired effect, while too much can make the background unrecognizable.
• Responsiveness: Ensure your background image and content layout adapt well to different screen sizes. background-size: cover and background-position: center are good starting points for responsive backgrounds.