Did you know that you can put some filter directly to your web / post image without Photoshop? CSS are fun, easy to learn and awesome to create effect to all parts of your website including texts, images, transition and more.
In today’s post, we’ve put together 110 useful CSS grayscale image filter to make your image more appealing. Some of tutorial include snippet code in Zip format you can download for free.
See Also: 25 Useful CSS Timeline
Cross-Browser Image Grayscale with CSS
This tutorial by Karl Horky is great to apply a grayscale effect to images across Firefox 10+, Firefox on Android, Chrome 19+ and Safari 6+.
Black and White Image on hover with CSS
A free CSS code snippet to help you transition an image to black and white on mouse hover.
CSS Filter Effects: Blur, Grayscale, Brightness
This CSS image filter tutorial are pretty powerful and incredibly easy to use. You can use them to blur, brighten or saturate images among other things.
Pure CSS3 Image Hover Effects
This css snippet code is easy to use to create beautiful image hover effects for their own website. simply insert into the existing css file and enjoy the new image hover effects.
Grayscale Filter for Google Map
This CSS grayscale filter for Google Map is designed by for Joe Watkins.
Css3 grayscale filter: copy n paste
This Css3 grayscale filter is compatible with Chrome 18+, Firefox 4+, IExplorer 6+, Safari 5.2+, Opera 13+. You can download this CSS snippet code in Zip format along with SVG file.
CSS3 filter effects: Grayscale, invert, sepia, and more
CSS3 filter effects including grayscale, hue rotate, invert, opacity, saturate, sepia, and combined effects, which include creating a black and white element.
Imager (WordPress Plugin)
Imager is powerful image tool wordpress plugin that allow you to beautiful your image using css filters and animations directly from WP’s Media Section.
Canvas Grayscale Sliders
Canvas grayscale sliders developed by robert ferguson.
Images Grayscale Tutorial with LESS CSS
This script/code you can use to create a desired image effect without Photoshop using LESS CSS with HTML to automatically convert the images from colour to grayscale.
