How to use CSS filter property In CSS

Using backdrop-filter Property

Apply a blur effect to the image using the CSS filter property with the blur function. The blur(3px) value specifies a 3-pixel blur radius, creating a visually blurred appearance for the image.

Syntax:

img {
   filter: brightness(20%) blur(20px);
}

Example: The below example uses the CSS filter property to add blur Effects to Images.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }

        h3 {
            text-align: center;
        }

        .image-container {
            text-align: center;
        }

        .blurred-image {
            filter: blur(3px);
            width: 400px;
            height: auto;
        }
    </style>
</head>

<body>
    <h1>w3wiki</h1>
    <h3>Using CSS filter property</h3>
    <div class="image-container">
        <img class="blurred-image" src=
"https://media.w3wiki.org/wp-content/uploads/20240305215328/gfglogo.png"
             alt="w3wiki Logo">
    </div>
</body>

</html>

Output:

How To Add Blur Effects to Images in CSS ?

Adding blur effects to the images in web applications enhances the visual appearance of the content. We can add blur effects using various CSS properties.

Below are the approaches to add blur effects to images in CSS:

Table of Content