WebAppers

/ best free open source web resources /

Graphic Resources

CSSgram – Instagram Filters with CSS and Blend Modes

Posted · Category: Gallery, MIT License

Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we’re doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects. This means less manual image processing and more fun filter effects on the web!

They are using pseudo-elements (i.e. :after) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like <img alt=”” />). The recommendation is to wrap your images in a <figure> tag.

image-filter

Requirements: CSS
Demo: http://una.im/CSSgram/
License: MIT License

1 Comment
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons