Understanding CSS3 Filters

CSS3 introduced a property called filter, which has eleven functions for performing visual effects on graphical elements (mostly <img />) on web pages.

How to use CSS3 Filters

Let's take a look at how to implement CSS3 Filters with the following syntax:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

/* Safari */
-webkit-filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Browser Support for CSS3 Filters

Browser support for CSS3 Filters Image source: Can I use. Note: Internet Explorer 8.0 and earlier supported a filter property, mostly used for creating features of opacity, but it is now deprecated.

The none Value

The name of this value makes its purpose pretty clear. It simply means there shouldn't be any filter effect on the selected element.

Blurring an image with blur() function

The CSS3 blur() function, as a value of the filter property, is used to blur an image. Its syntax and example are shown below:

The Syntax
[selector] {
     filter: blur( [value-in-length] );
     -webkit-filter: blur( [value-in-length] ); /* Safari */
}

where [selector] is a graphical element's selector, mostly <img />, and [value-in-length] is the blurring value in pixels. The bigger the length value, the more blurry the image becomes. 0 is used if no value is set.

Practical Example
img#filter {
  filter: blur(3px);
  -webkit-filter: blur(3px); /* Safari */
}

Brightening an image with brightness()

The brightness() function is used to adjust the brightness of the image.

The Syntax
[selector] {
     filter: brightness( [value-in-%] );
     -webkit-filter: brightness( [value-in-%] ); /* Safari */
}

where [selector] is the element target and [value-in-%] is the brightening rate in percentage. A value 0% renders the image as completely black. 100% is the default and represents the original image. Values over 100% will make the image brighter, whiles values below 100% will darken the image.

Practical Example
/* darker image */
img#filter {
  filter: brightness(50%);
  -webkit-filter: brightness(50%); /* Safari */
}

/* brighter image */
img#filter2 {
  filter: brightness(150%);
  -webkit-filter: brightness(150%); /* Safari */
}

Adjusting contrast with contrast()

The function contrast() is used to adjust the contrast of an image. Contrast is the difference in brightness between objects or regions.

The Syntax
[selector] {
     filter: contrast( [value-in-%] );
     -webkit-filter: contrast( [value-in-%] ); /* Safari */
}

where [selector] is the element target and [value-in-%] is the contrast rate in percentage. A value 0% renders the image as completely black. 100% is the default and represents the original image. Values over 100% will increase the image contrast, whiles values below 100% will decrease the image contrast.

Practical Example
/* low contrast image */
img#filter {
  filter: contrast(50%);
  -webkit-filter: contrast(50%); /* Safari */
}

/* high contrast image */
img#filter2 {
  filter: contrast(250%);
  -webkit-filter: contrast(150%); /* Safari */
}

Applying drop shadows with drop-shadow()

The drop-shadow() function simply applies a shadow to the image.

The Syntax
img#filter {
  filter: drop-shadow( [x-shadow] [y-shadow] [blur] [spread] [color] );
  -webkit-filter: drop-shadow( [y-shadow] [x-shadow] [blur] [spread] [color] ); /* Safari */
}

where:

  1. [x-shadow] -> REQUIRED. Specifies the shadow in pixels along the x-axis (horizantal). When negative values are used, the shadow is moved to the left of the image.
  2. [y-shadow] -> REQUIRED. Specifies the shadow in pixels, along the y-axis (vertical). When negative values are used, the shadow is moved to the top of the image.
  3. [blur] -> OPTIONAL. This adds a blur effect to the shadow, and must be in pixels. A bigger value makes the shadow bigger and lighter, whiles a smaller value does otherwise. 0 is used if no value is set. Negative values are not accepted.
  4. [spread] -> OPTIONAL. This value must be in pixels. Positive values expands the shadow and makes it bigger, and negative values draws back the shadow. 0 is used if no value is set. Note: This fourth value is not supported in the various browsers available; this value won't have any effect on image.
  5. [color] -> OPTIONAL. This specifies the colour of the shadow. If this is not set, the browser uses its default, usually black;
Practical Example
img#filter {
  filter: drop-shadow(5px 10px 10px #453afc);
  -webkit-filter: drop-shadow(8px 8px 10px #453afc); /* Safari */
}

The grayscale() Function

The grayscale() function is used to convert the image to grayscale. In case you don't know, a grayscale (or graylevel) image is simply one in which the only colors are shades of gray.

The Syntax
[selector] {
     filter: grayscale( [value-in-%] );
     -webkit-filter: grayscale( [value-in-%] ); /* Safari */
}

where [selector] is the element target and [value-in-%] represents the rate, in percentage, at which the image will be converted to grayscale. 0% is the default value and represents the original image. 100% makes the image completely gray. Negative values are not accepted.

Practical Example
/* low grayscale image */
img#filter {
  filter: grayscale(50%);
  -webkit-filter: grayscale(50%); /* Safari */
}

/* high grayscale image */
img#filter2 {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%); /* Safari */
}

Applying a hue rotation with hue-rotate()

The hue-rotate() function applies hue rotation to the image. The value passed to this function defines the number of degrees (deg) around the color circle the image samples will be adjusted.

The Syntax
[selector] {
     filter: hue-rotate( [value-in-degrees] );
     -webkit-filter: hue-rotate( [value-in-degrees] ); /* Safari */
}

where [value-in-degrees] is the value of degrees (deg) around the color circle the image samples will be adjusted. 0deg is the default value, and it represents the original image. The maximum value is 360deg even though values higher than this value wraps around.

Practical Example
/* minimum hue rotation */
img#filter {
  filter: hue-rotate(150deg);
  -webkit-filter: hue-rotate(150deg); /* Safari */
}

/* maximum hue rotation */
img#filter2 {
  filter: hue-rotate(360deg);
  -webkit-filter: hue-rotate(360deg); /* Safari */
}

The invert() function

This function is used to invert images.

The Syntax
[selector] {
     filter: invert( [value-in-%] );
     -webkit-filter: invert( [value-in-%] ); /* Safari */
}

where [value-in-%] specifies the rate, in percentage, at which the image should be inverted. 0% is default and represents the original image, whiles 100% will make the image completely inverted. No negative values are accepted.

Practical Example
/* not inverted */
img#filter {
  filter: invert(10%);
  -webkit-filter: invert(10%); /* Safari */
}

/* highly inverted image */
img#filter2 {
  filter: invert(150%);
  -webkit-filter: invert(150%); /* Safari */
}

Changing opacity with opacity()

The opacity() function is used to change the transparency level of an image.

The Syntax
[selector] {
     filter: opacity( [value-in-%] );
     -webkit-filter: opacity( [value-in-%] ); /* Safari */
}

where [value-in-%] represents the rate, in percentage, at which the image will be made transparent. 0% makes it completely transparent, and 100% makes no changes - image maintains its original state. No negative values are accepted.

Practical Example
img#filter {
  filter: opacity(50%);
  -webkit-filter: opacity(50%); /* Safari */
}

Saturating an image with saturate()

The saturate() function is used to saturate an image.

The Syntax
[selector] {
     filter: saturate( [value-in-%] );
     -webkit-filter: saturate( [value-in-%] ); /* Safari */
}

where [value-in-%] specifies the rate, in percentage, at which the image should be saturated. A value of 0% makes the image completely unsaturated whiles 100% is the default and represents the original image. Values over 100% makes the image super-saturated.

Practical Example
/* unsaturated */
img#filter {
  filter: saturate(0%);
  -webkit-filter: saturate(0%); /* Safari */
}

/* super-saturated */
img#filter2 {
  filter: saturate(250%);
  -webkit-filter: saturate(250%); /* Safari */
}

The sepia() function

This function converts the image to sepia. Sepia is a form of photographic print toning – a tone added to a black and white photograph in the darkroom to “warm” up the tones.

The Syntax
[selector] {
     filter: sepia( [value-in-%] );
     -webkit-filter: sepia( [value-in-%] ); /* Safari */
}

where [value-in-%] specifies the rate, in percentage, at which the image should be converted to sepia. A value of 0% is default and represents the original image. But 100% completely converts the image to sepia. Negative values are not accepted.

Practical Example
img#filter {
  filter: sepia(50%);
  -webkit-filter: sepia(50%); /* Safari */
}

The url() function

All the previously mentioned functions are CSS3 predefined functions that perform predefined visual effects on graphical elements. What if we want to make our own custom filter to suit our design needs? The url() function comes to rescue! With this function, we can create a custom filter in a SVG file or a specific filter element, and pass the URL of the file or the anchor of the filter element, respectively, to the url() function which then takes the effects implemented on the SVG file (or filter element) and passes it to the target image.

Example
img {
  filter: url(commonfilters.svg);
  -webkit-filter: url(photos/commonfilters.svg);  /* Safari */
}

Hopefully, in my next article we'll look at how to do that.

Additional tip

For the functions brightness(), contrast(), grayscale(), invert(), opacity(), saturate(), and sepia(), which all have the units of their values in percentages (%), their passed values could be decimals such as 0.0 to 1.0 instead of 0% to 100%. Hence, 0.0 or just 0 is the same as 0%, 0.5 is the same as 50%, 1.0 or just 1 is the same as 100%, etc.

Comments (5)

Frank Wilfried's photo

I just put:

” filter: opacity(.2); ”

Without “-webkit-filter: opacity(.2);”

Works fine in Firefox Developer Edition “36.0a2 (2014-12-10)”.

Thanks for nice tutorial, its crisp :D Bluestacks Lucky Patcher Kodi

Gyen Abubakar's photo

An aspiring Fullstack Developer, currently mastering front-end. I love writing and teaching others the little I know. Join me on my journey.

The -webkit- prefix is supported by Safari, Google Chrome and Konqueror browsers, even though Google annouced in 2013 that Chrome does not use the WebKit engine any longer. Mozilla Firefox uses the prefix -moz-.

I'm glad you liked it. :D

Andrew Smith's photo

Can someone give me the answer for my question https://www.smular.com/

Gyen Abubakar's photo

An aspiring Fullstack Developer, currently mastering front-end. I love writing and teaching others the little I know. Join me on my journey.

I'm sorry about that Andrew. In the beginning of the article, I did show a table of browsers which support the CSS3 filters. Kindly update Safari to the latest version; I believe that'll solve your problem.

Sorry for the late reply BTW.

Andrew Smith's photo

img#filter { filter: sepia(50%); -webkit-filter: sepia(50%); / Safari / Cant understand this https://www.androidfreewares.com/