CSS3 Tutorial: filters

CSS filters

CSS filters

In CSS3 there are quite a lot of so called filters, which you can apply to an underlying layer similar with how it is done in Photoshop but programmatically. Fiters are still in an experimental stadium which means that they and are not yet supported by all browsers ansd also that the syntax and behavior of the technology might change in future versions of browsers.

Syntax: filter: <filter-function> [<filter-function>]* | none

For a reference to an SVG <filter> element, use the following:

filter: url(svg-url#filter1) 

Browser support

The url() function

If we want to use a filter that is defined in another (XML or SVG) file, we could use the url() function:

Color filter 1

The CSS

.img { filter: url(/svg/utilities/filters.svg#filter1); }

The SVG file:

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="filter1">
    <feColorMatrix type="hueRotate" values="180" />
    </filter>
</svg>

Check this example in your browser

In our first examples we start with with applying a CSS greyscale filter on an image

1. grayscale() filter

grayscale filter

The CSS

.img { filter: url(#blur); }

Check this example in your browser

2a. hue-rotate() filter example 1

Color filter 1

The CSS

.img { filter: hue-rotate(90deg); }

Check this example in your browser

2b. hue-rotate() filter example 2

Color filter 2

Thee CSS

.img { filter: hue-rotate(180deg); }

Check this example in your browser

2c. hue-rotate() filter example 3

Color filter 3

The CSS

.img { filter: hue-rotate(270deg); }

Check this example in your browser

3. blur() filter

Blur filter

The CSS

.img { filter: blur(5px); }

Check this example in your browser

4. brightness() filter

Making the image appear more or less bright. A value of 0 will create an image that is completely black. A value of 1 leaves the input unchanged. Parameters with a value higher than 1 are allowed, providing brighter results. If no parameter is entered a value of 1 is assumed.

Brightness filter

The CSS

.img { filter: brightness(0.5); }

Check this example in your browser

5. contrast() filter

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. Parameters with a value higher than 100% are allowed, providing results with less contract. If no parameter is entered a value of 100% is assumed.

Contrast filter

The CSS

.img { filter: contrast(50%); }

Check this example in your browser

6. drop-shadow() filter

Applies a (drop)shadow effect to an image. The functions accepts the following parameters:

  • <offset-x> <offset-y> (required)
  • <blur-radius> (optional)
  • <spread-radius> (optional)
  • <color> (optional)

The inset keyword is not allowed. The function resembles the well-known box-shadow property with the difference that the filter variant takes advantage of the hardware accelleration (for better performance) that some browsers provide.

Shadow filter

The CSS

.img { filter:drop-shadow(5px 5px 10px  #666);}

Check this example in your browser

7. invert() filter

In this example, we'll invert the colors of an image by inverting the color of each pixel. The value parameter defines the amount of the conversion. A value of 100% is completely inverted. A value of 0% leaves the image unchanged. Values between 0% and 100% are linear multipliers on the effect. If there is no value specified, a value of 100% is used.

Invert filter

The CSS

.img {filter: invert (75%);}

Check this example in your browser

8. opacity() filter

Applies transparency an image. The value parameter defines the amount of the conversion. A value of 0% is completely transparent. A value of 100% leaves the images unchanged. Values between 0% and 100% are linear multipliers on the effect. If there is no value specified, a value of 100% is used. The function resembles the well-known opacity property with the difference that the filter variant takes advantage of the hardware accelleration (for better performance) that some browsers provide.

Opacity filter

The CSS

.img {filter:opacity(40%);}

Check this example in your browser

9. saturate() filter

Saturates the image. The value parameter defines the amount of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the images unchanged. Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing super-saturated results. If there is no value specified, a value of 100% is used.

Saturate filter

The CSS

.img {filter:saturate(300%);}

Check this example in your browser

10. sepia() filter

Converts the image to sepia. The value parameter defines the amount of the conversion. A value of 100% is completely sepia. A value of 0 leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If there is no value specified, a value of 100% is used.

Sepia filter

The CSS

.img {filter:epia(100%);}

Check this example in your browser

Combining filters

It is possible to combine any number of filters on the same image.

Sepia filter

The CSS

.img {filter:sepia(100%) contrast(125%) brightness(75%);}

Check this example in your browser

Leave a comment