CSS Filters

CSS filters allow for various effects to be applied to elements, such as images and text. 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.

The following example shows all of the above filters.

Example showing the various CSS filters (Run Example)

<!DOCTYPE html>
<head>
    <title>Course notes example code</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        /* Blur */
        #blur_min
        {
            filter:blur(0px);
        }

        #blur_middle
        {
            filter:blur(5px);
        }

        #blur_high
        {
            filter:blur(10px);
        }

        /* Brightness */
        #brightness_min
        {
            filter:brightness(0%);
        }

        #brightness_middle
        {
            filter:brightness(50%);
        }

        #brightness_max
        {
            filter:brightness(100%);
        }

        /* Contrast */
        #contrast_min
        {
            filter:contrast(0%);
        }

        #contrast_middle
        {
            filter:contrast(50%);
        }

        #contrast_max
        {
            filter:contrast(100%);
        }

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

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

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

        /* Grayscale */
        #grayscale_min
        {
            filter:grayscale(0%);
        }

        #grayscale_middle
        {
            filter:grayscale(50%);
        }

        #grayscale_max
        {
            filter:grayscale(100%);
        }

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

        #hue_rotate_middle
        {
            filter:hue-rotate(90deg);
        }

        #hue_rotate_high
        {
            filter:hue-rotate(270deg);
        }

        /* Invert */
        #invert_min
        {
            filter:invert(0%);
        }

        #invert_middle
        {
            filter:invert(50%);
        }

        #invert_max
        {
            filter:invert(100%);
        }

        /* Opacity */

        #opacity_min
        {
            filter:opacity(0%);
        }

        #opacity_middle
        {
            filter:opacity(50%);
        }

        #opacity_max
        {
            filter:opacity(100%);
        }

        /* Saturate */
        #saturate_min
        {
            filter:saturate(0%);
        }

        #saturate_middle
        {
            filter:saturate(50%);
        }

        #saturate_max
        {
            filter:saturate(100%);
        }

        /* Sepia */
        #sepia_min
        {
            filter:sepia(0%);
        }

        #sepia_middle
        {
            filter:sepia(50%);
        }

        #sepia_max
        {
            filter:sepia(100%);
        }

        /* url */
        #url_min
        {
            filter:url(#blur_0); 
        }

        #url_middle
        {
            filter:url(#blur_5); 
        }

        #url_high
        {
            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>
</body>
</html>