How to blur background image using CSS ?

Last Updated : 20 Jun, 2024

CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of a document written in HTML. In this article, we will learn how to blur background images using CSS, along with basic implementation examples.

Blurring Background Images with CSS

To blur a background image using CSS, you can utilize the filter property. The filter property is used to apply visual effects to elements.

Syntax:

body {
     background-image: url(your-image-url.jpg);
     filter: blur(10px);
}

Example 1: In this example, we will use HTML and CSS to create a blurred background image effect using the CSS filter property with a value of blur(10px) applied to an HTML div with the "background" class. The background image is specified using the CSS background-image property with a URL to an image file. The filter property is set to blur the background image by 10 pixels.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
          Blurred Background image in CSS
      </title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }
      
        .background {
            position: absolute;
            height: 100%;
            width: 100%;
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20230213094052/download.jpg");
            background-size: cover;
            background-position: center;
            filter: blur(10px);
            z-index: -1;
        }
      
        .text-container {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div class="background"></div>
    <div class="text-container">
        <h1 style="color:green">
            Welcome to Geeks for geeks</h1>
        <h3>Blurred Background Image</h3>
        <p>
            Example of css program to blur 
            background image
          </p>
    </div>
</body>
</html>

Output:

Example 2: This is an example of an HTML and CSS code for creating a blurred background image for better understanding. The code creates a full-screen blurred background image by applying the CSS filter property with a blur value of 5 pixels to the background image. The background image is displayed in a div element with a class of "background".

The CSS code also sets the height and width of the div to 100% to ensure it covers the entire viewport and sets the background image to a specific URL using the background-image property. The background-size property is set to "cover" to ensure that the image covers the entire div element, and the background-position property is set to "center" to ensure that the image is centered within the div. Finally, the z-index property is set to -1 to ensure that the background image is behind all other content on the page.

HTML

<!DOCTYPE html>

<html>    
<head>
    <title>
          Blurred Background image in CSS
      </title>

    <style>
        body, html {
            height: 100%;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }      

        .background {
            position: absolute;
            height: 100%;
            width: 100%;
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20230216164001/d7.png");
            background-size: cover;
            background-position: center;
            filter: blur(5px);
            z-index: -1;
        }
    </style>
</head>

<body>
    <div class="background"></div>
    <center>
        <h1 style="color:green">
            Welcome to Geeks for geeks</h1>
        <h3>Blurred Background Image</h3>
    </center>
</body>
</html>

Output:

Blurred Background image which contains text

Blurring background images using CSS is a straightforward yet powerful technique to enhance the visual appeal of your website. By using the filter property, you can easily apply a blur effect to any background image, creating a sleek and modern look.