Home » CSS

How to blur an image using CSS?

Here, we are going to learn about blurring an image using CSS – How we can blur an image using CSS?
Submitted by Anjali Singh, on January 19, 2020

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,

Definition:

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:

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

CSS | blur an image | Example

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.






Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.





Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.