How to Blur an Image using CSS?

Last Updated : 16 Oct, 2024

In CSS, the filter property is used to apply visual effects to images, such as blurring, grayscale, brightness adjustments, and more. One common use of the filter property is to apply a blur effect to an image, giving it a soft, out-of-focus appearance.

Syntax:

filter: blur(radius);

radius: Defines the intensity of the blur effect (in pixels). A larger radius produces a more intense blur.

Example 1: Converting an Image to a Blurred Image

This example demonstrates how to use the blur() filter to convert an image into a blurred version.

Example: This example uses a blur filter to convert the image into a blur image.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Convert into blur image</title>
    <style>
        img {
            -webkit-filter: blur(4px);
            filter: blur(4px);
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>Blur Image</h2>
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png" width="500px"
            height="250px" alt="filter applied" />
    </center>
</body>

</html>

Output:

Example 2: Creating a Blurred Background Image

This example demonstrates how to apply a blur effect to the background image of a container, while leaving the content inside the container unaffected.

Example 2: This example use blur filter to create background blur image.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Convert into blur image
    </title>

    <style>
        img {
            -webkit-filter: blur(4px);
            filter: blur(4px);
        }

        h1 {
            color: green;
        }

        .backgr-text {
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
    </style>
</head>

<body>
    <center>
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" width="500px"
            height="250px" alt="filter applied" />

        <div class="backgr-text">
            <h1>GeeksforGeeks</h1>
            <h2>Blurred Background Image</h2>
        </div>
    </center>
</body>

</html>