Ioanni Mitsakis November 22nd, 2016

Clever: 20 Image Effects With CSS

Clever: 20 Image Effects With CSS
CSS blend modes and filters allow for effects that were not possible before. When applying these new options to images, you can create even more impressive effects by stacking or repeating multiple attributes in clever ways. And all of this is done in a nondestructive way. image-effects-landing

Bennett Feely and his Code Snippets

Bennett Feely from Pittsburgh, Pennsylvania and his project Image-Effects on Github provide a great example for effects that can be achieved with an intelligent use of combinations or repetitions of different modern CSS attributes, for which you would not have used pure CSS until now. image-effects-infrared Bennett has built twenty effects. All of them are displayed while applied to the same original image, as well as with the according required code snippet in CSS and SCSS. You can either copy the snippets directly from the demo page, or switch to Codepen, where you get to play around with the settings, and a live preview. Bennett also provides all effects as a CSS library, which is easy to integrate into your projects, and only weights 1300 bytes when compressed. Of course, working with the uncompressed version of 12,8 kilobytes is more comfortable ;-) image-effects-coloredpencil In general, it is possible to use the effects right away. However, Bennett rightly recommends touching upon certain parameters, depending on the image you want to display. Bennett's Image-Effects use @supports for feature detection. When it's detected that a browser is unable to display the set attributes and values, the image is depicted without the effects. We can definitely be okay with this type of fallback.

The Application is This Easy

The individual effects are defined as classes, which you apply to your images accordingly. The easiest way to do this is to label a Div container with the respective class and place your image inside.
To avoid odd initial effects, you should assign the correct values for width and height to your image. This way, you make sure that the browser will use the correct image size as a placeholder right away.

Ioanni Mitsakis

Ioanni Mitsakis is front-end developer at a major European automotive supplier and responsible for the look & feel of their internal cloud-based apps. As his employer works internationally with distributed teams world-wide, a rock-solid development foundation is what Ioanni aims for. He better should ;-)


  1. Thank you for sharing. Great article for those who are starting in web designing industry.
    #CSS #WeMakeWebsite

  2. Amazing what you can do with CSS if you have the know-how. Great information, thank you for sharing.Now, its time to implement!

Leave a Reply

Your email address will not be published. Required fields are marked *