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
  • Íf posible send the result into canvas object for later save on image file or encoded in base64?

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons