Open In App

How to blur background image using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to blur background images using CSS, along with knowing basic implementation through the examples.

CSS Cascading Style Sheets is a language that is used to describe the appearance and formatting of a document written in HTML. It provides a way for developers to control the layout and visual aspects of a webpage without affecting its content. CSS allows for easy customization of a web page’s color, font, spacing, and other elements to make it a crucial tool for creating professional-looking and functional websites. 

To blur a background image using CSS, you can use the filter property. The filter property is used to set the visual effect of an element.

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(
            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:

Blurred background Image

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(
            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



Last Updated : 01 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads