CSS - Filters

Note: CSS Filters are not supported by Internet Explorer.

Original Image
No filter

HTML

Simplified

<div class="example">
    <figure>
        <img src="images/the-hare.gif" />
        <figcaption>The hare takes aim</figcaption>
    </figure>
</div>

CSS

div.example {
}

blur

CSS

div.example {
    filter: blur(2px);
}

Syntax blur(length);

brightness

CSS

div.example {
    filter: brightness(150%);
}

Syntax brightness(number | percent);

contrast

CSS

div.example {
    filter: contrast(150%);
}

Syntax contrast(number | percent);

drop-shadow

CSS

div.example {
    filter: drop-shadow(10px 10px 5px saddlebrown)
}

Syntax drop-shadow(offset-x offset-y shadow-depth color);

Arguments must be space separated. Commas will not work.

grayscale

CSS

div.example {
    filter: grayscale(100%);
}

Syntax grayscale(number | percent);

hue-rotate

CSS

div.example {
    filter: hue-rotate(120deg);
}

Syntax hue-rotate(angle);

invert

CSS

div.example {
    filter: invert(1);
}

Syntax invert(number | percent);

opacity

CSS

div.example {
    filter: opacity(0.5);
}

Syntax opacity(number | percent);

saturate

CSS

div.example {
    filter: saturate(300%);
}

Syntax saturate(number | percent);

sepia

CSS

div.example {
    filter: sepia(100%);
}

Syntax sepia(number | percent);

Combined

Contrast +
Grayscale

CSS

div.example {
    filter: contrast(150%) grayscale(100%);
}

Syntax filter: filter-function(params) filter-function(params);

Ads by Google