Mandala   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +{ { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }      ../../    ../../    ../../    ../../    ../../    ../../    ../../ <></><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </>

The CSS blur() Filter Function

This article demonstrates what and how to the use the CSS blur filter function on elements with CSS filter. Included is code and examples.

The CSS blur function is a value of the CSS filter property. Blur applies a Gaussian blur to the target HTML element. This can also include an image.

Syntax

filter: blur(value);

Parameters

  • value (required)

The value parameter is a CSS length, which can be an absolute or absolute length. The length defines how many pixels mix in a radius. Having a larger value, results in a stronger blur. The default value for blur is 0px. For interpolation, the default value is 0px.

Examples

The examples below, use absolute and relative values for the parameter of the blur filter function.

blur(0);        /* No effect */
blur(1rem);     /* A blur with a 1rem radius */
blur(20px);     /* A blur with a 20px radius */
blur(2em);      /* A blur with a 2em radius */
blur(2Q);       /* A blur with a 2Q radius */
blur(5pt);      /* A blur with a 5pt radius */
blur(0.15vh);   /* A blur with a 0.15vh radius */

Usage

You can apply the blur filter to an image or any other element using CSS selectors.

#element-id {
  filter: blur(5px);
}

img {
  filter: blur(0.25em);
}

Try It

css-blur-filter-function
css-blur-filter-function

HTML

<div class="container">
<div class="wrapper">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/noah-silliman-141979.jpg" alt="" />
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/noah-silliman-141979.jpg" alt="" />
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/noah-silliman-141979.jpg" alt="" />
</div>

CSS

.wrapper img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 6px;
  margin: 0 20px;
  vertical-align: middle;
}

.wrapper img:nth-child(2) {
  filter: blur(2px);
}

.wrapper img:nth-child(3) {
  filter: blur(4px);
}

html {
  text-align: center;
  min-height: 100%;
  background: linear-gradient(white, #ddd);
}

.wrapper {
  width: 100%;
  background: transparent;
  text-align: center;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
}

Specifications

W3C CSS Filter Effects Module Level 1
#funcdef-filter-blur

Other Filter Functions