When you’re designing a website, you may decide that you want to add a blur effect to a particular image. For instance, if you’re designing a website for a coffee house, you may want to blur an image so that you can place text in front of the image for the user to read.
That’s where the CSS blur function comes in. The blur function applies a blur effect to a specified input image, which you can then use with the “filter” property to blur an image.
This tutorial will discuss, an example, the basics of the CSS blur function and how you can use it to apply a blur effect to an image in your code. By the end of reading this tutorial, you’ll be an expert at using the CSS blur function.
CSS Filter
The CSS filter property allows you to apply graphical effects to an element on a web page. Often, the filter property is used to apply filters to images and backgrounds on a web page.
There are a number of different filters offered by CSS. The opacity filter, for example, allows you to make an element more or less visible, and the drop-shadow filter allows you to add a shadow beneath an element on a web page.
The syntax for applying a filter is as follows:
filter: filterName(arguments);
For this tutorial, we’re going to focus on the CSS blur function, which adds a blur effect to an image.
CSS Blur
The CSS blur filter is a filter function that adds a blur effect to an image.
The syntax for using the blur filter is as follows:
filter: blur(radius);
In this syntax, “radius” refers to the radius of the blur effect that should be applied. The larger the radius value you specify, the more intense the blur added to an image element will be. If you specify the value “0”, no blur will be added to the image element to which the style is applied.
The radius value you specify can accept any length value, such as em, px, rem, and cm.
Let’s walk through an example to illustrate how this function works. Suppose we are designing a web site for a local coffee house. On the coffee house’s home page, they want a stock image of a coffee to appear. However, they want that image to appear with a blur effect with a radius of 2px.
We could use the blur function and the filter property to accomplish this task. Here’s the code we could use to create such an image with a blur function:
<html>
<img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80" height="400" width="600" />
</html>
<style>
img {
filter: blur(2px);
}
</style>Our code returns: Click the 
button in the code editor above to see the output of our HTML/CSS code.
In our HTML file, we used an <img> tag to add an image to our web page. This image links to a stock image of a coffee. We use the “height” and “width” parameters to set the height and width of our image to 400px and 600px, respectively.
In our CSS code, we use the filter property and the blur function to apply a blur effect to all <img> tags on our web page. In this case, we specify a blur radius of 2px, which adds a slight blur effect to our image. As you can see above, the image of the coffee cup we are using appears slightly blurry because we have used the blur effect.
Alternatively, if we wanted to specify a blur radius using another unit of measurement, we could do so by replacing “2px” with the value we want to use. So, if we wanted our image to have a blur with a 1.15em blur radius, we could do so by replacing the “2px” blur radius we specified above.
Conclusion
The CSS blur function allows you to create a blur for an image element on a web page. This function is used in combination with the filter property to apply the blur effect to an image.
This tutorial discussed the basics of CSS filters and how to use the blur function to add a blur effect to an image on a web page. Now you’re equipped with the knowledge you need to add blur effects to an image like a professional!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
