Skip to main content
X

Explore your training options in 10 minutes

CSS Tutorials

CSS Blur

James Gallagher - January 08, 2021


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.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

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 Image of the "Run Code" Button, a triangle inside a circle button in the code editor above to see the output of our HTML/CSS code.

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

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.

What's Next?

James Gallagher

About the author: James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others. He also serves as a researcher at Career Karma, publishing comprehensive reports on the bootcamp market.

Previous Article

CSS Active

Next Article

How to Create a CSS Hero Image

Skip to main content