Convert Color images to Grayscale, Sepia, Blur & more with CSS Filter

Back to original tutorial on Css-Jquery-Design.Com

CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. With advancements in the standards of Cascaded Style Sheets (CSS), doing a number of things in web design and development is becoming increasingly easier and fun. The latest specification (CSS3) has brought lots of new features, among the best is CSS filters. Filters allow you to modify the display of images in a variety of ways, some of those ways of displaying images as black and white, grayscale, sepia, invert, saturate, hue-rotate, blur and more. Though, this feature is not yet widely supported, but they are indeed impressive and a modern need for web imagery.

Rollover on images below & see effect:

Grayscale

Blur

Sepia

Invert