How to blur an image using CSS?

CSS | Create a Blurred Image: In this tutorial, we will learn about blurring an image using CSS with the help of examples. By Anjali Singh Last updated : July 10, 2023

Introduction

Sometimes even the professional developers tend to forget the various basic properties which can be applied to solve very simple problems, therefore the fundamentals of developing a website or web page should be very clear and must be practiced thoroughly. This section is all about one such property which is used to deal with the most-used element on a website or web page.

Trivia

Images are very interesting elements on any web page or website but to deal with them is equally critical and important as well. Images enhance the appearance of the web page or website, besides images attract many users and any user would love to see some images while visiting any website or web page. Images are used for reference for some piece of information, besides the images can be used to give a clear picture of what is being said in an article, blog, etc. Therefore to deal with such fundamental elements is of paramount importance. This section is about one such property which is widely used while dealing with the images, which is known as blur property in CSS.

Let us move forward and have a look at the definition below,

CSS | Create a Blurred Image

Since by looking at the name of the property it is quite obvious to know that what is the purpose of this property.

When the user needs to blur a specific image then this blur CSS property comes into play. The filter property is used to convert any image into a blurred image. Very basic property and very easy to implement. This property is used widely and proves to be of utmost importance to make a website or web page responsive.

Syntax

Element{
    filter:blur();
}

Where the user can specify the intensity of the blur effect that is used to blur the image.

Example for creating a blurred image using CSS

<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        img {
            filter: blur(4px);
        }
    </style>
</head>

<body>
    <p>Apply a blur effect to the image below:</p>

    <img src="img_forest.jpg" width="300" height="300">
</body>

</html>

Output

It is very clear by looking at the result of the example above that the image of the forest is blurred with 4px intensity.

Note: To use this property, you must ensure that you are using the value filter and then followed by the property blur(), otherwise the property would be rendered useless.

Closing tips

Since the property is very easy to implement and to understand but one must be very careful while using the blur property in CSS as this property can not be used on every image because if you make a relevant image as a blur then the user would not be able to see the content of that image.

CSS Examples »

How to clear floats (clearfix) using CSS?

How to set background image size using CSS?