Add Awesome Effects to Images on your Website using CSS Filters

Spending hours and hours on Photoshop or other photo editing application to achieve some extra effects on your images like adjusting the brightness and contrast or adding up a blur or grayscale effect. If you are looking to use them on your website or blog then there is another way to do that simple and easy with CSS Filters effect.

One single line of code will make your images standout of the crowd adding some cool effects without effecting the original image at all. But one negative side to it is that the CSS filters will only work on Webkit based browser mainly on Chrome, Safari etc. If you are ok with that let’s get started and add some effects to your image –

To start let’s apply the Grayscale effect to one of my images, add up this CSS to your image tag

img {
 -webkit-filter: grayscale(100%);
 }

You can increase or decrease the effect by simply changing the percentage value from 0% to 100%.

Grayscale CSS  filter effect

Next the famous Sepia effect which gives the image a reddish-brown color tone. Here also you can change the percentage value from 0% to 100%.

img {
 -webkit-filter: sepia(100%);
 }

Sepia CSS filter effect

Next the Saturate effect on your image, adding a value of 0%  makes the image completely un-saturated and adding a value of 100% leaves the image unchanged. Try adding the values in between them to get an overly of bright colors.

img {
 -webkit-filter: saturate (20%);
 }

Saturate CSS filter effect

Next for adding extra Brightness to the image, this will make the image more or less bright. A value of 0% will create an image that is completely black and a value of 100% leaves the image as original unchanged.

img {
 -webkit-filter: brightness (70%);
 }

Brightness CSS Filter effect

Again let’s add some extra Contrast to the image. Adding 0% makes the image completely grey and 100% leaves the images unchanged, but you can have the value over 100% creating some extra effects on your image.

img {
 -webkit-filter: contrast(150%) ;
 }

Contrast CSS filter effects

You can also add Gaussian Blur effect to the images. Note that the blur values are stated in pixel radius similar to what you find on Photoshop.

img {
 -webkit-filter: blur(10px) ;
 }

Gaussian blur CSS filter effect

Another interesting one is the Invert effect on images, a value of 100% makes the image completely inverted and 0% leaves the image untouched.

img {
 -webkit-filter: invert(50%) ;
 }

invert CSS filter effect

Interestingly you can also combine two effects to build some cool images, like combining both Brightness and Contrast or adding the grayscale and contrast to the images.

img {
 -webkit-filter: brightness(50%) contrast(150%);
 }

img {
 -webkit-filter: grayscale(60%) contrast(180%);
 }

Also instead of applying the effects directly to the images you can add them during mouse hover (img:hover), making it more appropriate and effective.

Do try this out and if you want to learn more about the CSS filter head over to World Wide Web Consortium (W3C).

Subscribe to Datareign

Follow us on

Ads

Speak Out – Leave a Comment

comments powered by Disqus
Sponsored Video