Filter Property

  1. Since filter is an experimental feature, you should use the -webkit prefix. It may change in syntax and behavior, but the changes are probably going to be small.

  2. It might not be supported in older versions of major browsers. It might be entirely unsupported in mobile browsers.

  3. Due to its relatively limited support, try to use box-shadow instead of filter: drop-shadow(). Use opacity instead of filter: opacity().

  4. It can be animated through Javascript/jQuery. For Javascript, use object.style.WebkitFilter.

  5. Check W3Schools or MDN for more info.

  6. W3Schools also has a demo page for all the different type of filter values.

Drop Shadow (use box-shadow instead if possible)

HTML

<p>My shadow always follows me.</p>

CSS

p {
    -webkit-filter: drop-shadow(10px 10px 1px green);
    filter: drop-shadow(10px 10px 1px green);
}

Result

enter image description here

Multiple Filter Values

To use multiple filters, separate each value with a space.

HTML

<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />

CSS

img {
    -webkit-filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
    filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
}

Result

enter image description here

Hue Rotate

HTML

<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />

CSS

img {
    -webkit-filter: hue-rotate(120deg);
    filter: hue-rotate(120deg);
}

Result

enter image description here

Invert Color

HTML

<div></div>

CSS

div {
    width: 100px;
    height: 100px;
    background-color: white;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

Result

enter image description here

Turns from white to black.

Blur

HTML

<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />

CSS

img {
    -webkit-filter: blur(1px);
    filter: blur(1px);
}

Result

enter image description here

Makes you wanna rub your glasses.