8 Photoshop Filters With CSS3 Code

CSS3 Filters really are a pretty exciting prospect for us Web Designers while they make effects that we typically keep company with Photoshop, possible to apply in the browser with ease.

Grayscale: This converts color in our input image to a shade of gray. 

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

Saturate: This applies a color saturation effect to the colors which makes them look more vivid. 

img{
     -webkit-filter: saturate(50%);
     -moz-filter: saturate(50%);
     -o-filter: saturate(50%);
     -ms-filter: saturate(50%);
     filter: saturate(50%);
}
 

Sepia: Thus giving the colors passed in a sepia tinge like in old photographs. 

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

Hue Rotate: What it does is shift the colors around to produce an input image look completely different. 

img{
    filter: hue-rotate(20deg);
    -webkit-filter: hue-rotate(20deg);
    -moz-filter: hue-rotate(20deg);
    -o-filter: hue-rotate(20deg);
    -ms-filter: hue-rotate(20deg);
}
 

Blur: If you like the content being filtered to look semi-transparent, this is actually the one for you. 

img {
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -ms-filter: blur(5px);
        -o-filter: blur(5px);
        filter: blur(5px);
}
 

Invert: It requires a snapshot of the image, helps it be an individual color, blurs it, then offsets the end result a bit so it seems like a shadow of the original content. 

img{
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
    filter: invert(100%);
}

 




Brightness: It adjusts the colors between completely black and the original color in proportion to the ‘amount'parameter. 

img{
     -webkit-filter: brightness(0.2);
     -moz-filter: brightness(0.2);
     -o-filter: brightness(0.2);
     -ms-filter: brightness(0.2);
     filter: brightness(0.2);
}
 

Contrast: This may adjust the difference involving the darkest and lightest areas of the input image.

        

                                          

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