100%

Fun with CSS Filters

R Proffitt
by Richard Proffitt
iopan design

The fact that CSS has the capability of transforming images with PhotoShop-like filters has always impressed me. Sure, there are only a handful at the moment — but see how quickly technology advances? More different filters are promised for the future. Still, with a few basic filters at your disposal, and the spirit of adventure, it's supprising just what images you can produce.

See the table below for the list of current filters available for CSS. We'll be looking at them all in this article now, and great news for us: the syntax is really simple to understand.

Currently, I cannot honestly say what prefixes are necessary for the different browsers to render the filters effectively. In the examples given below, I'm just using the general CSS code, with just one prefix: -webkit-. If you're uncertain, you could add the others… but that might not be needed – so try them without first, you could save a lot of time and trouble.

Available CSS Filters

Filter Units Description
blur() pixels To be more specific, they type of blur that the blur() function produces, is what designer's would call a Gaussian Blur; a sort of all-over general shifting of pixels. You only need to specify a small number of pixels before the blurred image becomes unrecognisable.
brightness() percentage This does just what you would expect turning up and down the brightness on any electronic device. But remember, you can specify a brightness of above 100% if you wish, this is true of the other filters also.
contrast() percentage And this filter does for changing the contrast levels of the particular hues… bright colours become brighter, dark colours, darker. Again, it's perfectly fine to specify a contrast of 200%.
url()
drop-shadow() x and y pixels, spread in pixels, shadow colour in code There are four units to be entered, three are in pixels, the final data is the colour of the shadow and can be entered in any of the usual ways (hex code, rgb, rgba, etc.) Firstly and Secondly, the x and y positions, as in a 2D grid. Thirdly the ammount of spread in pixels. This filter works most effectively on a transparent png.
grayscale() percentage
hue-rotate() degrees
invert() percentage
opacity() percentage
sepia() percentage

The CSS Filters' Syntax

.filter { filter: <filter-function> [<filter-function>]* | none }

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim.

six CSS filters demonstrated
Six CSS Filters

In the image, you should be able to make out that there are six different filters being demonstrated. But continue reading and you'll see all of the filters demonstrated.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae.

“Above all, think of life as a prototype. We can conduct experiments, make discoveries, and change our perspectives. We can look for opportunities to turn processes into projects that have tangible outcomes. We can learn how to take joy in the things we create whether they take the form of a fleeting experience or an heirloom that will last for generations. We can learn that reward comes in creation and re-creation, no just in the consumption of the world around us. Active participation in the process of creation is our right and our privilege. We can learn to measure the success of our ideas not by our bank accounts by their impact on the world.”

Tim Brown

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim.

img

CSS Filter Examples

The following examples should give you a taste of just what can be done with CSS filters. In each example, I give you the CSS code and the original image along with the image with that filter applied. The HTML code for applying a single filter uses the filters CSS class name in a <div> which encloses the <img> as can be seen below:

<div class="myfilter"><img scr="my/path/to/image.jpg"></div>

Once you have experimented with applying filters and playing around with the variables, try applying two or more filters to an image. Simply add the new filter's class name to the <div> element… happy coding!

blur()

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit.

.myfilter img {
	filter: blur(6px);
	-webkit-filter: blur(6px);
	}
original
blur(6px)

brightness()

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit.

.myfilter img {
	filter: brightness(2.35);
	-webkit-filter: brightness(2.35);
	}
original
brightness(2.35)

contrast()

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit.

.myfilter img {
	filter: contrast(1.71);
	-webkit-filter: contrast(1.71);
	}
original
contrast(1.71)

saturate()

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit.

.myfilter img {
	filter: saturate(2.5);
	-webkit-filter: saturate(2.5);
	}
original
saturate(2.5)

sepia()

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit.

.myfilter img {
	filter: sepia(0.8);
	-webkit-filter: sepia(0.8);
	}
original
sepia(0.8)

grayscale()

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit.

.myfilter img {
	filter: greyscale(0.8);
	-webkit-filter: greyscale(0.8);
	}
original
blur(6px)

hue-rotate()

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit.

.myfilter img {
	filter: hue-rotate(200);
	-webkit-filter: hue-rotate(200);
	}
original
hue-rotate(200)

invert()

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit.

.myfilter img {
	filter: invert(0.75);
	-webkit-filter: invert(0.75);
	}
original
invert(0.75)

opacity()

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit.

.myfilter img {
	filter: opacity(0.3);
	-webkit-filter: opacity(0.3);
	}
original
opacity(0.3)

sepia()

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit.

.myfilter img {
	filter: blur(6px);
	-webkit-filter: blur(6px);
	}
original
blur(6px)

Nullam vel tellus

Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim. ❧

 


Articles