Jump to main content

Demoing CSS Filters

  • Published:
  • Category: CSS

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.

See the CSS filters demo page.