X
Your browser doesn't support CSS Filters, you can still take a look at the code and play with the sliders, but you won't see any changes. Please use Google Chrome or Safari (only on a mac)!

At the moment of writing CSS Filters are only supported by -webkit browsers, so to be able to see the effects, please use Chrome or Safari! I have included all prefixes in each example, you never now when other browsers are going to support this, but for now they won't work ;).

On this page you will be able to see the different CSS filters which I used as experiment for the upcoming Daily Inspiration layout (ETA dec. 2012). They won't make it in the final version due to limited support, so I decided to show the effects here, on my personal website. On this tab you can play with the sliders to create your own effects. Keep in mind that if you use to many filters at once the browser may become very slow.

You can change the images if you want, simply click on an image, a pop-up will open showing you 4 images from my website and an input field. Click on any of the 4 images to change them, or enter a valid image url in the input field and when you hit submit the images will change.

Blur control
Grayscale control
Brightness control
Contrast control
Drop-shadow control
Sepia control
Hue-rotate control
Invert control
Opacity control
Saturate control

Reset all filters

Without effect
.effect{
  -webkit-filter: none;
  -ms-filter: none;
  -moz-filter: none;
  -o-filter: none;
  filter: none;
}
With effect
.effect{
  -webkit-filter: blur(5px);
  -ms-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
}
Show effect onhover
.effect{
  -webkit-filter: blur(0px);
  -ms-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  filter: blur(0px);
}

.effect:hover{
  -webkit-filter: blur(5px);
  -ms-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
}
Show effect onhover, animated
.effect{
  -webkit-filter: blur(0px);
  -ms-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  filter: blur(0px);
  -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  -ms-transition: 0.5s linear all;
  transition: 0.5s linear all;
}

.effect:hover{
  -webkit-filter: blur(5px);
  -ms-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
}
Control the effect
.effect{
  -webkit-filter: blur(0px);
  -ms-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  filter: blur(0px);
}
i

The blur effect is almost the same effect as using 'Gaussian Blur' (Filter > Blur > Gaussian Blur) in photoshop. You can enter a value in px, the higher the value the more blurrier the image. A value of zero will output the same as -webkit-filter: none... No blur at all.

Without effect
.effect{
  -webkit-filter: none;
  -ms-filter: none;
  -moz-filter: none;
  -o-filter: none;
  filter: none;
}
With effect
.effect{
  -webkit-filter: grayscale(1);
  -ms-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -o-filter: grayscale(1);
  filter: grayscale(1);
}
Show effect onhover
.effect{
  -webkit-filter: grayscale(0);
  -ms-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -o-filter: grayscale(0);
  filter: grayscale(0);
}

.effect:hover{
  -webkit-filter: grayscale(1);
  -ms-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -o-filter: grayscale(1);
  filter: grayscale(1);
}
Show effect onhover, animated
.effect{
  -webkit-filter: grayscale(0);
  -ms-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -o-filter: grayscale(0);
  filter: grayscale(0);
  -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  -ms-transition: 0.5s linear all;
  transition: 0.5s linear all;
}

.effect:hover{
  -webkit-filter: grayscale(1);
  -ms-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -o-filter: grayscale(1);
  filter: grayscale(1);
}
Control the effect
.effect{
   -webkit-filter: grayscale(0);
  -ms-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -o-filter: grayscale(0);
  filter: grayscale(0);
}
i

The grayscale effect converts colors to a shade of gray, the number between brackets decides how much gray conversion is applied. The range is between 0 (for no gray conversion) to 1 (for full conversion). If you're more comfortable using percentages, that's possible as well, you can use 0% till 100% or 0 till 1 (and all values in-between). Both will work.

Without effect
.effect{
  -webkit-filter: none;
  -ms-filter: none;
  -moz-filter: none;
  -o-filter: none;
  filter: none;
}
With effect
.effect{
  -webkit-filter: brightness(0.9);
  -ms-filter: brightness(0.9);
  -moz-filter: brightness(0.9);
  -o-filter: brightness(0.9);
  filter: brightness(0.9);
}
Show effect onhover
.effect{
  -webkit-filter: brightness(0);
  -ms-filter: brightness(0);
  -moz-filter: brightness(0);
  -o-filter: brightness(0);
  filter: brightness(0);
}

.effect:hover{
  -webkit-filter: brightness(0.9);
  -ms-filter: brightness(0.9);
  -moz-filter: brightness(0.9);
  -o-filter: brightness(0.9);
  filter: brightness(0.9);
}
Show effect onhover, animated
.effect{
  -webkit-filter: brightness(0);
  -ms-filter: brightness(0);
  -moz-filter: brightness(0);
  -o-filter: brightness(0);
  filter: brightness(0);
  -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  -ms-transition: 0.5s linear all;
  transition: 0.5s linear all;
}

.effect:hover{
  -webkit-filter: brightness(0.9);
  -ms-filter: brightness(0.9);
  -moz-filter: brightness(0.9);
  -o-filter: brightness(0.9);
  filter: brightness(0.9);
}
Control the effect
.effect{
  -webkit-filter: brightness(0);
  -ms-filter: brightness(0);
  -moz-filter: brightness(0);
  -o-filter: brightness(0);
  filter: brightness(0);
}
i

Brightness can go two ways, in my examples I went from 0 to 0.9 (the max is 1.0, which will make the image completely white). But you can go from o to -1 as well, which will make the image totally black. Going higher will make the image lighter, going lower will make it darker. If you're more comfortable using percentages, that's possible as well, you can use 0% till 100% or 0 till 1 (and all values in-between). Both will work.

Without effect
.effect{
  -webkit-filter: none;
  -ms-filter: none;
  -moz-filter: none;
  -o-filter: none;
  filter: none;
}
With effect
.effect{
  -webkit-filter: contrast(10);
  -ms-filter: contrast(10);
  -moz-filter: contrast(10);
  -o-filter: contrast(10);
  filter: contrast(10);
}
Show effect onhover
.effect{
  -webkit-filter: contrast(1);
  -ms-filter: contrast(1);
  -moz-filter: contrast(1);
  -o-filter: contrast(1);
  filter: contrast(1);
}

.effect:hover{
  -webkit-filter: contrast(10);
  -ms-filter: contrast(10);
  -moz-filter: contrast(10);
  -o-filter: contrast(10);
  filter: contrast(10);
}
Show effect onhover, animated
.effect{
  -webkit-filter: contrast(1);
  -ms-filter: contrast(1);
  -moz-filter: contrast(1);
  -o-filter: contrast(1);
  filter: contrast(1);
  -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  -ms-transition: 0.5s linear all;
  transition: 0.5s linear all;
}

.effect:hover{
  -webkit-filter: contrast(10);
  -ms-filter: contrast(10);
  -moz-filter: contrast(10);
  -o-filter: contrast(10);
  filter: contrast(10);
}
Control the effect
.effect{
  -webkit-filter: contrast(1);
  -ms-filter: contrast(1);
  -moz-filter: contrast(1);
  -o-filter: contrast(1);
  filter: contrast(1);
}
i

This will adjust the difference between the darkest and lightest parts of the element you use the filter on. It seems like there is no end value for this, but after using 10 I didn't see much difference, so I used that in my examples. If you use 0 your image will be completely grey, 1 will be the normal state and then it seems like you can go as high as you want. If you're more comfortable using percentages, that's possible as well, you can use 0% till 'x'% or 0 till 'x' (and all values in-between). Both will work.

Without effect
.effect{
  -webkit-filter: none;
  -ms-filter: none;
  -moz-filter: none;
  -o-filter: none;
  filter: none;
}
With effect
.effect{
  -webkit-filter: drop-shadow(5px 5px 5px black);
  -ms-filter:  drop-shadow(5px 5px 5px black);
  -moz-filter:  drop-shadow(5px 5px 5px black);
  -o-filter:  drop-shadow(5px 5px 5px black);
  filter:  drop-shadow(5px 5px 5px black);
}
Show effect onhover
.effect{
  -webkit-filter: drop-shadow(0px 0px 0px black);
  -ms-filter:  drop-shadow(0px 0px 0px black);
  -moz-filter:  drop-shadow(0px 0px 0px black);
  -o-filter:  drop-shadow(0px 0px 0px black);
  filter:  drop-shadow(0px 0px 0px black);
}

.effect:hover{
  -webkit-filter: drop-shadow(5px 5px 5px black);
  -ms-filter:  drop-shadow(5px 5px 5px black);
  -moz-filter:  drop-shadow(5px 5px 5px black);
  -o-filter:  drop-shadow(5px 5px 5px black);
  filter:  drop-shadow(5px 5px 5px black);
}
Show effect onhover, animated
.effect{
  -webkit-filter: drop-shadow(0px 0px 0px black);
  -ms-filter:  drop-shadow(0px 0px 0px black);
  -moz-filter:  drop-shadow(0px 0px 0px black);
  -o-filter:  drop-shadow(0px 0px 0px black);
  filter:  drop-shadow(0px 0px 0px black);
  -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  -ms-transition: 0.5s linear all;
  transition: 0.5s linear all;
}

.effect:hover{
  -webkit-filter: drop-shadow(5px 5px 5px black);
  -ms-filter:  drop-shadow(5px 5px 5px black);
  -moz-filter:  drop-shadow(5px 5px 5px black);
  -o-filter:  drop-shadow(5px 5px 5px black);
  filter:  drop-shadow(5px 5px 5px black);
}
Control the effect
.effect{
  -webkit-filter: drop-shadow(0px 0px 0px black);
  -ms-filter:  drop-shadow(0px 0px 0px black);
  -moz-filter:  drop-shadow(0px 0px 0px black);
  -o-filter:  drop-shadow(0px 0px 0px black);
  filter:  drop-shadow(0px 0px 0px black);
}
i

At first sight the output of this filter seems exactly the same as using the easier to use box-shadow. However, this drop-shadow is much better when you're using transparant images. Drop-shadow will follow the borders of the image itself, box-shadow will follow the border of the image-container. Read this post to understand what I mean. Hovering with an animated effect seems a little buggy for this one.

Without effect
.effect{
  -webkit-filter: none;
  -ms-filter: none;
  -moz-filter: none;
  -o-filter: none;
  filter: none;
}
With effect
.effect{
  -webkit-filter: sepia(1);
  -ms-filter: sepia(1);
  -moz-filter: sepia(1);
  -o-filter: sepia(1);
  filter: sepia(1);
}
Show effect onhover
.effect{
  -webkit-filter: sepia(0);
  -ms-filter: sepia(0);
  -moz-filter: sepia(0);
  -o-filter: sepia(0);
  filter: sepia(0);
}

.effect:hover{
  -webkit-filter: sepia(1);
  -ms-filter: sepia(1);
  -moz-filter: sepia(1);
  -o-filter: sepia(1);
  filter: sepia(1);
}
Show effect onhover, animated
.effect{
  -webkit-filter: sepia(0);
  -ms-filter: sepia(0);
  -moz-filter: sepia(0);
  -o-filter: sepia(0);
  filter: sepia(0);
  -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  -ms-transition: 0.5s linear all;
  transition: 0.5s linear all;
}

.effect:hover{
  -webkit-filter: sepia(1);
  -ms-filter: sepia(1);
  -moz-filter: sepia(1);
  -o-filter: sepia(1);
  filter: sepia(1);
}
Control the effect
.effect{
  -webkit-filter: sepia(0);
  -ms-filter: sepia(0);
  -moz-filter: sepia(0);
  -o-filter: sepia(0);
  filter: sepia(0);
}
i

This works exactly the same as the grayscale filter, you can use the same values, with the difference that the output is sepia toned.

Without effect
.effect{
  -webkit-filter: none;
  -ms-filter: none;
  -moz-filter: none;
  -o-filter: none;
  filter: none;
}
With effect
.effect{
  -webkit-filter: hue-rotate(180deg);
  -ms-filter: hue-rotate(180deg);
  -moz-filter: hue-rotate(180deg);
  -o-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}
Show effect onhover
.effect{
  -webkit-filter: hue-rotate(deg);
  -ms-filter: hue-rotate(0deg);
  -moz-filter: hue-rotate(0deg);
  -o-filter: hue-rotate(0deg);
  filter: hue-rotate(0deg);
}

.effect:hover{
  -webkit-filter: hue-rotate(180deg);
  -ms-filter: hue-rotate(180deg);
  -moz-filter: hue-rotate(180deg);
  -o-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}
Show effect onhover, animated
.effect{
  -webkit-filter: hue-rotate(deg);
  -ms-filter: hue-rotate(0deg);
  -moz-filter: hue-rotate(0deg);
  -o-filter: hue-rotate(0deg);
  filter: hue-rotate(0deg);
  -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  -ms-transition: 0.5s linear all;
  transition: 0.5s linear all;
}

.effect:hover{
  -webkit-filter: hue-rotate(180deg);
  -ms-filter: hue-rotate(180deg);
  -moz-filter: hue-rotate(180deg);
  -o-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}
Control the effect
.effect{
  -webkit-filter: hue-rotate(deg);
  -ms-filter: hue-rotate(0deg);
  -moz-filter: hue-rotate(0deg);
  -o-filter: hue-rotate(0deg);
  filter: hue-rotate(0deg);
}
i

For me the coolest of the available filters (especially with the animated effect), it shifts the colors around to make the element look completely different. This effect takes the original color as 'zero-point' and rotates it by an angle to shift all the colors in the image 'angle' on a 'colorwheel'. The input ranges from 0deg to 360deg where both 0 and 360 will ouput the original color.

Without effect
.effect{
  -webkit-filter: none;
  -ms-filter: none;
  -moz-filter: none;
  -o-filter: none;
  filter: none;
}
With effect
.effect{
  -webkit-filter: invert(1);
  -ms-filter: invert(1);
  -moz-filter: invert(1);
  -o-filter: invert(1);
  filter: invert(1);
}
Show effect onhover
.effect{
  -webkit-filter: invert(0);
  -ms-filter: invert(0);
  -moz-filter: invert(0);
  -o-filter: invert(0);
  filter: invert(0);
}

.effect:hover{
  -webkit-filter: invert(1);
  -ms-filter: invert(1);
  -moz-filter: invert(1);
  -o-filter: invert(1);
  filter: invert(1);
}
Show effect onhover, animated
.effect{
  -webkit-filter: invert(0);
  -ms-filter: invert(0);
  -moz-filter: invert(0);
  -o-filter: invert(0);
  filter: invert(0);
  -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  -ms-transition: 0.5s linear all;
  transition: 0.5s linear all;
}

.effect:hover{
  -webkit-filter: invert(1);
  -ms-filter: invert(1);
  -moz-filter: invert(1);
  -o-filter: invert(1);
  filter: invert(1);
}
Control the effect
.effect{
  -webkit-filter: invert(0);
  -ms-filter: invert(0);
  -moz-filter: invert(0);
  -o-filter: invert(0);
  filter: invert(0);
}
i

If you want to recreate a negative effect like a photo back from the old film, this is the effect you need. Values range between 0 and 1 where 0 is the original and 1 is the inverted version. When using values in-between the image will go from the original colors to grey until 0.5 and then go from grey to the inverted colors. Using this in combination with a drop-shadow will invert the shadow as well. If you're more comfortable using percentages, that's possible as well, you can use 0% till 100% or 0 till 1. Both will work.

Without effect
.effect{
  -webkit-filter: none;
  -ms-filter: none;
  -moz-filter: none;
  -o-filter: none;
  filter: none;
}
With effect
.effect{
  -webkit-filter: opacity(0.1);
  -ms-filter: opacity(0.1);
  -moz-filter: opacity(0.1);
  -o-filter: opacity(0.1);
  filter: opacity(0.1);
}
Show effect onhover
.effect{
  -webkit-filter: opacity(1);
  -ms-filter: opacity(1);
  -moz-filter: opacity(1);
  -o-filter: opacity(1);
  filter: opacity(1);
}

.effect:hover{
  -webkit-filter: opacity(0);
  -ms-filter: opacity(0);
  -moz-filter: opacity(0);
  -o-filter: opacity(0);
  filter: opacity(0);
}
Show effect onhover, animated
.effect{
  -webkit-filter: opacity(1);
  -ms-filter: opacity(1);
  -moz-filter: opacity(1);
  -o-filter: opacity(1);
  filter: opacity(1);
  -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  -ms-transition: 0.5s linear all;
  transition: 0.5s linear all;
}

.effect:hover{
  -webkit-filter: opacity(0);
  -ms-filter: opacity(0);
  -moz-filter: opacity(0);
  -o-filter: opacity(0);
  filter: opacity(0);
}
Control the effect
.effect{
  -webkit-filter: opacity(1);
  -ms-filter: opacity(1);
  -moz-filter: opacity(1);
  -o-filter: opacity(1);
  filter: opacity(1);
}
i

So far, this seems to do exactly the same as opacity: value. I couldn't find a difference between this filter and the opacity value itself. Value range is from 0 to 1, where 0 is completely transparent and 1 is completely visible. If you're more comfortable using percentages, that's possible as well, you can use 0% till 100% or 0 till 1 (and all values in-between). Both will work.

Without effect
.effect{
  -webkit-filter: none;
  -ms-filter: none;
  -moz-filter: none;
  -o-filter: none;
  filter: none;
}
With effect
.effect{
  -webkit-filter: saturate(10);
  -ms-filter: saturate(10);
  -moz-filter: saturate(10);
  -o-filter: saturate(10);
  filter: saturate(10);
}
Show effect onhover
.effect{
  -webkit-filter: saturate(1);
  -ms-filter: saturate(1);
  -moz-filter: saturate(1);
  -o-filter: saturate(1);
  filter: saturate(1);
}

.effect:hover{
  -webkit-filter: saturate(10);
  -ms-filter: saturate(10);
  -moz-filter: saturate(10);
  -o-filter: saturate(10);
  filter: saturate(10);
}
Show effect onhover, animated
.effect{
  -webkit-filter: saturate(1);
  -ms-filter: saturate(1);
  -moz-filter: saturate(1);
  -o-filter: saturate(1);
  filter: saturate(1);
  -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  -ms-transition: 0.5s linear all;
  transition: 0.5s linear all;
}

.effect:hover{
  -webkit-filter: saturate(10);
  -ms-filter: saturate(10);
  -moz-filter: saturate(10);
  -o-filter: saturate(10);
  filter: saturate(10);
}
Control the effect
.effect{
  -webkit-filter: saturate(1);
  -ms-filter: saturate(1);
  -moz-filter: saturate(1);
  -o-filter: saturate(1);
  filter: saturate(1);
}
i

This applies a color saturation effect to the colors, almost the same as using the Hue/Saturation (Image > Adjustments > Hue/Saturation...) option in photoshop, with one difference, the max is not 100%. Same as with the contrast filter, I couldn't find an end value so used 10 in my example. 1 is the normal value, going to zero will make the image grayscaled, going up will add more and more saturation. If you're more comfortable using percentages, that's possible as well, you can use 0% till 'x'% or 0 till 'x' (and all values in-between). Both will work.