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

The CSS filter Property

This article demonstrates the different functions of the CSS filter property and how to use filter. Included are examples and code.

The CSS filter property applies different effects to html elements, such as contrast, blur, drop-shadow, hue, etc. Filters are use often to adjust the look of backgrounds and other elements. There are several filter functions available to achieve pre defined effects. Addionally you can also use a SVG as a filter similar to the mask property. An SVG filter is created by using a URL associated to an SVG element.

Syntax

filter: <filter-function> | <url>

CSS SVG Filter

/* URL to SVG filter */
filter: url("filter.svg#element-id");

CSS Filter Functions

<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

CSS Multiple Filters

/* Multiple filters */
filter: opacity(35%) brightness(3%) grayscale(50%);

CSS Filter None

/* Use no filter */
filter: none;

CSS Filter Global Values

/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

Usage

You can apply the filter property to any element by using CSS selectors.

#element-id {
  filter: sepia(87%);
}

img {
  filter: grayscale(50%);
}

Try It

The CSS Filter Property
The CSS Filter Property

HTML

<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="" />
  <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(1) {
  filter: sepia(0%);
}

.wrapper img:nth-child(2) {
  filter: invert(75%);
}

.wrapper img:nth-child(3) {
  filter: opacity(75%);
}

.wrapper img:nth-child(4) {
  filter: hue-rotate(180deg);
}

.wrapper img:nth-child(5) {
  filter: sepia(75%);
}

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
#definitions

Supported Filter Functions