CSS Filters

What are CSS filters?

Published:

The CSS filter property allows for powerful, PhotoShop-like, effects to be applied an element prior to an element's rendering in the browser. What this means is that image or element manipulation that could once only be performed with image editing software, server-side image manipulation or JavaScript have become available to us in CSS with very straight-forward syntax. 

.example {
  filter: filter-type(value);
}

CSS filters are currently only fully implemented in FireFox (v.35+), but can be used in Chrome, Opera and Safari with the -webkit- prefix. There is no current support in any version of Internet Explorer.

Note: CSS filters may also be applied to SVG elements, but at the time of writing this demo, applying filters to SVGs is only available in FireFox, with no support in any other browsers.

Read much more about CSS filters on MDN, CSS Tricks and the W3C Spec Draft.

Photo Credit: unsplash.com

Read other things I've written.

Examples of CSS Filters

  • silhouette of a man looking at the night sky

    No filter.

  • silhouette of a man looking at the night sky

    Blur Filter

  • silhouette of a man looking at the night sky

    Brightness Filter

  • silhouette of a man looking at the night sky

    Contrast Filter

  • silhouette of a man looking at the night sky

    Drop Shadow Filter

  • silhouette of a man looking at the night sky

    Grayscale Filter

  • silhouette of a man looking at the night sky

    Hue Rotate Filter

  • silhouette of a man looking at the night sky

    Invert Filter

  • silhouette of a man looking at the night sky

    Opacity Filter

  • silhouette of a man looking at the night sky

    Saturate Filter

  • silhouette of a man looking at the night sky

    Sepia Filter

  • silhouette of a man looking at the night sky

    Contrast & Brightness Filters