get it on google playCreated with Sketch.
CSS> Filter blur()

Filter blur()

To make big visual changes to elements, we use the filter property.

 <head>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h3>Filter-shop</h3>
  <p>No filter added</p>
  <img src="https://mimo.app/i/nacho.png">
 </body>
img {
 filter
} 

filter can use a few different functions as it's value. Let's start with blur().

 <head>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h3>Filter-shop</h3>
  <p>Out of focus filter added</p>
  <img src="https://mimo.app/i/nacho.png">
 </body>
img {
 filter: blur();
} 

The blur function makes an image blurry. To use it, we add a number in pixels inside the parentheses, like 2px.

 <head>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h3>Filter-shop</h3>
  <p>Out of focus filter added</p>
  <img src="https://mimo.app/i/nacho.png">
 </body>
img {
 filter: blur(2px);
} 

A high number, like 10px, makes an element very blurry since the number says how many pixels should blend together.

 <head>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h3>Filter-shop</h3>
  <p>Out of focus filter added</p>
  <img src="https://mimo.app/i/nacho.png">
 </body>
img {
 filter: blur(10px);
} 
TRY IT ON THE APP