CSS Filters

CSS filters allow for various effects to be applied to elements, such as images and text.

Compatibility issues

Currently, only -webkit- browsers fully support the full set of filters. At present, Internet Explorer has its own set of filter functions. These are fully described at this link. At present, Firefox uses scalable vector graphics (SVG) to implement filters. SVG are fully described at this link. The example below shows how the blur filter can be made to be fully cross-browser compatible.

Example of cross-browser blur (Run Example)

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
/* Blur */
#blur_min
{
  -webkit-filter : blur(0px);
  -moz-filter : blur(0px);
  -ms-filter : blur(0px);
  -o-filter : blur(0px);
  filter : blur(0px);
}

#blur_middle
{
    -webkit-filter : blur(5px);
  -moz-filter : blur(5px);
  -ms-filter : blur(5px);
  -o-filter : blur(5px);
  filter : blur(5px);
}

#blur_high
{
  -webkit-filter : blur(10px);
  -moz-filter : blur(10px);
  -ms-filter : blur(10px);
  -o-filter : blur(10px);
  filter : blur(10px);
}

div.filter
{
  position:relative;
  float:left;
  width : 250px;
  margin : 25px;
  text-align:center;
}

div.filter img
{
  width : 100%;
}

h2
{
  padding-top:20px;
  border-top:thin solid #ccc;
  clear:both;
}
</style>

<!-- Internet Explorer -->
<!--[if IE]>   
<style>
#blur_min
{
  filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=0);
}
#blur_middle
{
  filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
}
#blur_high
{
  filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=10);
}
</style>
<![endif]-->


<!-- Firefox -->
<style>
@-moz-document url-prefix()   
{ 
    #blur_min
    {
      filter: url(#blur_0); 
    }
    
  #blur_middle
    {
      filter: url(#blur_5); 
    }
    
  #blur_high
    {
      filter: url(#blur_10); 
    }
}
</style>


</head>

<body>
<h2>Blur</h2>

<div class = "filter"><img id = "blur_min" src="images/dkit02.gif">blur(0px)</div>
<div class = "filter"><img id = "blur_middle" src="images/dkit02.gif">blur(5px)</div>
<div class = "filter"><img id = "blur_high" src="images/dkit02.gif">blur(10px)</div>

<!-- Mozilla browsers do not currently support filters, so use svg instead -->
<svg>
    <filter id="blur_0"><feGaussianBlur stdDeviation="0" /></filter>
    <filter id="blur_5"><feGaussianBlur stdDeviation="5" /></filter>
    <filter id="blur_10"><feGaussianBlur stdDeviation="10" /></filter>
</svg>

</body>
</html>

W3C CSS Filters

The complete set of W3C CSS filters is shown below:

Blur: Applies a Gaussian blur to the input image. A larger value will create more blur. If no parameter is provided, then a value of 0px is used. The parameter is specified in pixels.
Brightness: Makes an element appear more or less bright. A value of 0% will create an element that is completely black. A value of 100% leaves the input unchanged. Values of an amount over 100% are allowed, providing brighter results.
Contrast: Adjusts the contrast of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Values over 100% are allowed, providing results with less contrast.
Drop shadow: Applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image. The parameters are specified in pixels.
Grayscale: Converts the input image to grayscale. A value of 0% leaves the input unchanged. A value of 100% is completely grayscale.
Hue Rotate: Applies a hue rotation on the input image. The parameter is the number of degrees around the color circle the input sample will be adjusted. A value of 0deg leaves the input unchanged. The maximum value is 360deg.
Invert: Inverts the samples in the input image. A value of 0% leaves the input unchanged. A value of 100% is completely inverted.
Opacity: Applies transparency to the samples in the input image. A value of 0% is completely transparent. A value of 100% leaves the input unchanged.
Saturate: Saturates the input image. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing super-saturated results.
Sepia: Converts the input image to sepia. A value of 0 leaves the input unchanged. A value of 100% is completely sepia.
url: The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element. If the SVG filter is in the current file, then only an anchor is needed.

The following example shows all of the above filters.

NOTE 1, currently, this example will only run in -webkit- browsers, with the exception of the url filter, which will only run in Firefox.

Example showing the various CSS filters (Run Example)

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Blur */
#blur_min
{
  -webkit-filter : blur(0px);
  -moz-filter : blur(0px);
  -ms-filter : blur(0px);
  -o-filter : blur(0px);
  filter : blur(0px);
}

#blur_middle
{
  -webkit-filter : blur(5px);
  -moz-filter : blur(5px);
  -ms-filter : blur(5px);
  -o-filter : blur(5px);
  filter : blur(5px);
}

#blur_high
{
  -webkit-filter : blur(10px);
  -moz-filter : blur(10px);
  -ms-filter : blur(10px);
  -o-filter : blur(10px);
  filter : blur(10px);
}

/* Brightness */
#brightness_min
{
  -webkit-filter : brightness(0%);
  -moz-filter : brightness(0%);
  -ms-filter : brightness(0%);
  -o-filter : brightness(0%);
  filter : brightness(0%);
}

#brightness_middle
{
  -webkit-filter : brightness(50%);
  -moz-filter : brightness(50%);
  -ms-filter : brightness(50%);
  -o-filter : brightness(50%);
  filter : brightness(50%);
}

#brightness_max
{
  -webkit-filter : brightness(100%);
  -moz-filter : brightness(100%);
  -ms-filter : brightness(100%);
  -o-filter : brightness(100%);
  filter : brightness(100%);
}

/* Contrast */
#contrast_min
{
  -webkit-filter : contrast(0%);
  -moz-filter : contrast(0%);
  -ms-filter : contrast(0%);
  -o-filter : contrast(0%);
  filter : contrast(0%);
}

#contrast_middle
{
  -webkit-filter : contrast(50%);
  -moz-filter : contrast(50%);
  -ms-filter : contrast(50%);
  -o-filter : contrast(50%);
  filter : contrast(50%);
}

#contrast_max
{
  -webkit-filter : contrast(100%);
  -moz-filter : contrast(100%);
  -ms-filter : contrast(100%);
  -o-filter : contrast(100%);
  filter : contrast(100%);
}

/* Drop Shadow */
#drop_shadow_min
{
  -webkit-filter : drop-shadow(0px 0px 0px black);
  -moz-filter : drop-shadow(0px 0px 0px black);
  -ms-filter : drop-shadow(0px 0px 0px black);
  -o-filter : drop-shadow(0px 0px 0px black);
  filter : drop-shadow(0px 0px 0px black);
}

#drop_shadow_middle
{
  -webkit-filter : drop-shadow(10px 10px 20px black);
  -moz-filter : drop-shadow(10px 10px 20px black);
  -ms-filter : drop-shadow(10px 10px 20px black);
  -o-filter : drop-shadow(10px 10px 20px black);
  filter : drop-shadow(10px 10px 20px black);
}

#drop_shadow_high
{
  -webkit-filter : drop-shadow(10px 10px 60px black);
  -moz-filter : drop-shadow(10px 10px 60px black);
  -ms-filter : drop-shadow(10px 10px 60px black);
  -o-filter : drop-shadow(10px 10px 60px black);
  filter : drop-shadow(10px 10px 60px black);
}

/* Grayscale */
#grayscale_min
{
  -webkit-filter : grayscale(0%);
  -moz-filter : grayscale(0%);
  -ms-filter : grayscale(0%);
  -o-filter : grayscale(0%);
  filter : grayscale(0%);
}

#grayscale_middle
{
  -webkit-filter : grayscale(50%);
  -moz-filter : grayscale(50%);
  -ms-filter : grayscale(50%);
  -o-filter : grayscale(50%);
  filter : grayscale(50%);
}

#grayscale_max
{
  -webkit-filter : grayscale(100%);
  -moz-filter : grayscale(100%);
  -ms-filter : grayscale(100%);
  -o-filter : grayscale(100%);
  filter : grayscale(100%);
}

/* Hue Rotate */
#hue_rotate_min
{
  -webkit-filter : hue-rotate(0deg);
  -moz-filter : hue-rotate(0deg);
  -ms-filter : hue-rotate(0deg);
  -o-filter : hue-rotate(0deg);
  filter : hue-rotate(0deg);
}

#hue_rotate_middle
{
  -webkit-filter : hue-rotate(90deg);
  -moz-filter : hue-rotate(90deg);
  -ms-filter : hue-rotate(90deg);
  -o-filter : hue-rotate(90deg);
  filter : hue-rotate(90deg);
}

#hue_rotate_high
{
  -webkit-filter : hue-rotate(270deg);
  -moz-filter : hue-rotate(270deg);
  -ms-filter : hue-rotate(270deg);
  -o-filter : hue-rotate(270deg);
  filter : hue-rotate(270deg);
}

/* Invert */
#invert_min
{
  -webkit-filter : invert(0%);
  -moz-filter : invert(0%);
  -ms-filter : invert(0%);
  -o-filter : invert(0%);
  filter : invert(0%);
}

#invert_middle
{
  -webkit-filter : invert(50%);
  -moz-filter : invert(50%);
  -ms-filter : invert(50%);
  -o-filter : invert(50%);
  filter : invert(50%);
}

#invert_max
{
  -webkit-filter : invert(100%);
  -moz-filter : invert(100%);
  -ms-filter : invert(100%);
  -o-filter : invert(100%);
  filter : invert(100%);
}

/* Opacity */

#opacity_min
{
  -webkit-filter : opacity(0%);
  -moz-filter : opacity(0%);
  -ms-filter : opacity(0%);
  -o-filter : opacity(0%);
  filter : opacity(0%);
}

#opacity_middle
{
  -webkit-filter : opacity(50%);
  -moz-filter : opacity(50%);
  -ms-filter : opacity(50%);
  -o-filter : opacity(50%);
  filter : opacity(50%);
}

#opacity_max
{
  -webkit-filter : opacity(100%);
  -moz-filter : opacity(100%);
  -ms-filter : opacity(100%);
  -o-filter : opacity(100%);
  filter : opacity(100%);
}

/* Saturate */
#saturate_min
{
  -webkit-filter : saturate(0%);
  -moz-filter : saturate(0%);
  -ms-filter : saturate(0%);
  -o-filter : saturate(0%);
  filter : saturate(0%);
}

#saturate_middle
{
  -webkit-filter : saturate(50%);
  -moz-filter : saturate(50%);
  -ms-filter : saturate(50%);
  -o-filter : saturate(50%);
  filter : saturate(50%);
}

#saturate_max
{
  -webkit-filter : saturate(100%);
  -moz-filter : saturate(100%);
  -ms-filter : saturate(100%);
  -o-filter : saturate(100%);
  filter : saturate(100%);
}

/* Sepia */
#sepia_min
{
  -webkit-filter : sepia(0%);
  -mos-filter : sepia(0%);
  -ms-filter : sepia(0%);
  -o-filter : sepia(0%);
  filter : sepia(0%);
}

#sepia_middle
{
  -webkit-filter : sepia(50%);
  -mos-filter : sepia(50%);
  -ms-filter : sepia(50%);
  -o-filter : sepia(50%);
  filter : sepia(50%);
}

#sepia_max
{
  -webkit-filter : sepia(100%);
  -mos-filter : sepia(100%);
  -ms-filter : sepia(100%);
  -o-filter : sepia(100%);
  filter : sepia(100%);
}

/* url */
#url_min
{
  -webkit-filter: url(#blur_0); 
  -moz-filter: url(#blur_0); 
  -ms-filter: url(#blur_0); 
  -o-filter: url(#blur_0); 
  filter: url(#blur_0); 
}

#url_middle
{
  -webkit-filter: url(#blur_5); 
  -moz-filter: url(#blur_5); 
  -ms-filter: url(#blur_5); 
  -o-filter: url(#blur_5); 
  filter: url(#blur_5); 
}

#url_high
{
  -webkit-filter: url(#blur_10); 
  -moz-filter: url(#blur_10); 
  -ms-filter: url(#blur_10); 
  -o-filter: url(#blur_10); 
  filter: url(#blur_10); 
}

div.filter
{
  position:relative;
  float:left;
  width : 250px;
  margin : 25px;
  text-align:center;
}

div.filter img
{
  width : 100%;
}

h2
{
  padding-top:20px;
  border-top:thin solid #ccc;
  clear:both;
}
</style>
</head>

<body>
<h2>Blur</h2>
<div class = "filter"><img id = "blur_min" src="images/dkit02.gif">blur(0px)</div>
<div class = "filter"><img id = "blur_middle" src="images/dkit02.gif">blur(5px)</div>
<div class = "filter"><img id = "blur_high" src="images/dkit02.gif">blur(10px)</div>

<h2>Brightness</h2>
<div class = "filter"><img id = "brightness_min" src="images/dkit02.gif">brightness(0%)</div>
<div class = "filter"><img id = "brightness_middle" src="images/dkit02.gif">brightness(5%)</div>
<div class = "filter"><img id = "brightness_max" src="images/dkit02.gif">brightness(100%)</div>

<h2>Contrast</h2>
<div class = "filter"><img id = "contrast_min" src="images/dkit02.gif">contrast(0%)</div>
<div class = "filter"><img id = "contrast_middle" src="images/dkit02.gif">contrast(50%)</div>
<div class = "filter"><img id = "contrast_max" src="images/dkit02.gif">contrast(100%)</div>

<h2>Drop shadow</h2>
<div class = "filter"><img id = "drop_shadow_min" src="images/dkit02.gif">drop-shadow(0px 0px 0px black)</div>
<div class = "filter"><img id = "drop_shadow_middle" src="images/dkit02.gif">drop-shadow(10px 10px 20px black)</div>
<div class = "filter"><img id = "drop_shadow_high" src="images/dkit02.gif">drop-shadow(10px 10px 60px black)</div>

<h2>Grayscale</h2>
<div class = "filter"><img id = "grayscale_min" src="images/dkit02.gif">grayscale(0%)</div>
<div class = "filter"><img id = "grayscale_middle" src="images/dkit02.gif">grayscale(50%)</div>
<div class = "filter"><img id = "grayscale_max" src="images/dkit02.gif">grayscale(100%)</div>

<h2>Hue Rotate</h2>
<div class = "filter"><img id = "hue_rotate_min" src="images/dkit02.gif">hue-rotate(90deg)</div>
<div class = "filter"><img id = "hue_rotate_middle" src="images/dkit02.gif">hue-rotate(180deg)</div>
<div class = "filter"><img id = "hue_rotate_high" src="images/dkit02.gif">hue-rotate(270deg)</div>

<h2>Invert</h2>
<div class = "filter"><img id = "invert_min" src="images/dkit02.gif">invert(0%)</div>
<div class = "filter"><img id = "invert_middle" src="images/dkit02.gif">invert(50%)</div>
<div class = "filter"><img id = "invert_max" src="images/dkit02.gif">invert(100%)</div>

<h2>Opacity</h2>
<div class = "filter"><img id = "opacity_min" src="images/dkit02.gif">opacity(0%)</div>
<div class = "filter"><img id = "opacity_middle" src="images/dkit02.gif">opacity(50%)</div>
<div class = "filter"><img id = "opacity_max" src="images/dkit02.gif">opacity(100%)</div>

<h2>Saturate</h2>
<div class = "filter"><img id = "saturate_min" src="images/dkit02.gif">saturate(0%)</div>
<div class = "filter"><img id = "saturate_middle" src="images/dkit02.gif">saturate(50%)</div>
<div class = "filter"><img id = "saturate_max" src="images/dkit02.gif">saturate(100%)</div>

<h2>Sepia</h2>
<div class = "filter"><img id = "sepia_min" src="images/dkit02.gif">sepia(0%)</div>
<div class = "filter"><img id = "sepia_middle" src="images/dkit02.gif">sepia(50%)</div>
<div class = "filter"><img id = "sepia_max" src="images/dkit02.gif">sepia(100%)</div>

<h2>url (Only work in Firefox)</h2>
<div class = "filter"><img id = "url_min" src="images/dkit02.gif">url blur(0px)</div>
<div class = "filter"><img id = "url_middle" src="images/dkit02.gif">url blur(5px)</div>
<div class = "filter"><img id = "url_high" src="images/dkit02.gif">url blur(10px)</div>

<svg>
    <filter id="blur_0"><feGaussianBlur stdDeviation="0" /></filter>
    <filter id="blur_5"><feGaussianBlur stdDeviation="5" /></filter>
    <filter id="blur_10"><feGaussianBlur stdDeviation="10" /></filter>
</svg>

</body>
</html>