CSS – How to Blur Background?

In web design, creating visually appealing layouts is essential for engaging users. One effective way to achieve a modern and sophisticated look is by applying a blur effect to the background of elements. This technique can enhance readability, create a sense of depth, and draw attention to specific content. In this blog, we’ll explore various methods to blur backgrounds using CSS, discuss their applications, and provide practical examples.

---

Understanding Background Blurring

Blurring backgrounds can improve the user experience by making foreground content more legible and visually appealing. It can be particularly useful in scenarios like:

• Modals and Dialogs: When overlaying content, blurring the background can help users focus on the modal.
• Image Overlays: Applying a blur effect to images in the background can create a more polished appearance.
• Navigation Bars: Blurring backgrounds in nav bars can add sophistication while maintaining readability.

Methods to Blur Backgrounds in CSS

1. Using the backdrop-filter Property

The backdrop-filter property is the most straightforward way to apply a blur effect to the background of an element. This method works by blurring everything behind the element, allowing for a transparent or semi-transparent foreground.

Example:

HTML Structure:

<div class="blurred-background">
    <h2>Welcome to Our Website</h2>
    <p>Experience the beauty of CSS effects!</p>
</div>

CSS Styles:

body {
    background-image: url('path/to/your/background.jpg'); /* Background image */
    background-size: cover;                              /* Cover the whole screen */
    height: 100vh;                                      /* Full viewport height */
    margin: 0;                                          /* Remove default margin */
}

.blurred-background {
    backdrop-filter: blur(10px);                        /* Apply blur effect */
    background-color: rgba(255, 255, 255, 0.5);       /* Semi-transparent background */
    padding: 20px;                                      /* Add padding */
    border-radius: 10px;                                /* Rounded corners */
    text-align: center;                                 /* Center text */
    width: 80%;                                         /* Set width */
    max-width: 600px;                                  /* Maximum width */
    margin: auto;                                      /* Center the container */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);        /* Add shadow for depth */
}

Explanation:

• The backdrop-filter: blur(10px); property applies a 10-pixel blur to everything behind the .blurred-background div.
• The background-color is set to a semi-transparent white, allowing the blurred image to show through while providing a light background for text readability.

2. Creating a Blurred Background with Pseudo-Elements

If you want more control or need to apply blur to a specific section of the page without affecting other elements, you can use pseudo-elements.

Example:

HTML Structure:

<div class="blurred-section">
    <h2>Section Title</h2>
    <p>This section has a blurred background!</p>
</div>

CSS Styles:

body {
    background-image: url('path/to/your/background.jpg'); /* Background image */
    background-size: cover;                               /* Cover the whole screen */
    height: 100vh;                                       /* Full viewport height */
    margin: 0;                                           /* Remove default margin */
    position: relative;                                  /* Set relative positioning for pseudo-element */
}

.blurred-section {
    position: relative;                                   /* Set position for the container */
    z-index: 1;                                         /* Layer above pseudo-element */
    padding: 20px;                                      /* Add padding */
    color: white;                                       /* Text color */
    text-align: center;                                 /* Center text */
}

.blurred-section::before {
    content: '';                                         /* Necessary for pseudo-element */
    position: absolute;                                 /* Absolute positioning */
    top: 0;                                            /* Top alignment */
    left: 0;                                           /* Left alignment */
    right: 0;                                          /* Right alignment */
    bottom: 0;                                         /* Bottom alignment */
    background-image: inherit;                          /* Inherit the background */
    filter: blur(10px);                                 /* Apply blur */
    z-index: -1;                                       /* Layer behind the content */
}

Explanation:

• A pseudo-element (::before) is used to create a layer behind the .blurred-section that inherits the background image.
• The filter: blur(10px); applies the blur effect to this pseudo-element, ensuring that the text remains clear and legible.

3. Blurring with filter Property

You can also use the filter property to blur a background image set on an <img> tag or as a background image in a container.

Example:

HTML Structure:

<div class="image-container">
    <img src="path/to/your/background.jpg" alt="Background Image" class="blurred-image">
    <div class="content">
        <h2>Welcome to Our Website</h2>
        <p>Experience the beauty of CSS effects!</p>
    </div>
</div>

CSS Styles:

.image-container {
    position: relative;                                   /* Enable positioning */
    overflow: hidden;                                    /* Prevent overflow */
    height: 100vh;                                      /* Full viewport height */
}

.blurred-image {
    width: 100%;                                        /* Full width */
    height: 100%;                                       /* Full height */
    object-fit: cover;                                  /* Cover the container */
    filter: blur(10px);                                 /* Apply blur */
}

.content {
    position: absolute;                                  /* Absolute positioning */
    top: 50%;                                           /* Center vertically */
    left: 50%;                                          /* Center horizontally */
    transform: translate(-50%, -50%);                  /* Adjust position */
    color: white;                                       /* Text color */
    text-align: center;                                 /* Center text */
    z-index: 1;                                        /* Layer above the image */
}

Explanation:

• The filter: blur(10px); property is applied directly to the <img> element, creating a blurred effect on the image itself.
• The content is positioned absolutely to ensure it appears above the blurred image, maintaining legibility.

Best Practices for Blurring Backgrounds

1. Use Blur Sparingly: While blurring can enhance aesthetics, excessive blur can reduce readability and distract from content. Use it judiciously.
2. Optimize Performance: The backdrop-filter and filter properties can be performance-intensive, particularly on mobile devices. Test your designs across different devices to ensure smooth performance.
3. Accessibility: Ensure that text over blurred backgrounds is legible. Use high-contrast colors and consider the visual accessibility of your design.
4. Fallbacks for Browsers: Not all browsers support backdrop-filter. Always provide fallbacks or alternate designs for users on unsupported browsers.

Conclusion

Blurring backgrounds using CSS can significantly enhance the visual appeal of your web design while improving user experience. Whether you choose to use backdrop-filter, pseudo-elements, or the filter property, understanding these techniques allows you to create stunning layouts that capture your audience’s attention.

To recap:

• Backdrop-filter: Great for creating blurred overlays on backgrounds.
• Pseudo-elements: Provides control for specific sections while maintaining the original image.
• Filter property: Useful for directly applying blur effects to images.

By implementing these techniques thoughtfully, you can create engaging, modern, and sophisticated designs that stand out in today’s digital landscape.