CSS Photo Effects & Filters From CodePen - Freebie Supply

These days you can use CSS photo effects or any kind of filters on your images when building a website, web app or mobile app. Applying code-based custom effects, it becomes much easier to change or tweak them at any given time. Most commonly used CSS effects are blend modes & gradients that lets you apply contrast, luminosity, hue and other.

Here’s a list of some of the best CSS photo effects and filters I found on CodePen.

A large set of photo filters using CSS blend modes and Javascript for making adjustments.

Venetian Blinds Photo Effect

A cool 3D venetian blinds effect using CSS transform and JS.

Image Mosaic Effect With CSS Grids & Blend Modes

Uses CSS Grid Spec and mix-blend-mode to create a mosaic effect from a single image. Photograph by [Christoph Ruhrmann](https://500px.com/photo/184035727/), used under a Creative Commons license.

CSS Half-tone Photo Filter: 8 Luminance Levels

This SVG filter will generate an 8 level half-tone from an image based on a 3×3 grid. It relies on feImage object import so it does not work on Firefox.

Glitch Photo CSS Filters

Here are four photo filters using pure CSS. Those are 3D anaglyph effect, glitch effect, VHS video effect and GB camera effect.

Displacement Map Image Transition Done With CSS & JS

Scroll effect & photo transition test for a project using PIXI for Webgl abstraction.

Image Transitions Using SVG Filters

This is inspired by Yoichi Kobayashi's GLSL based cross-image dissolve. This is a simpler version done using SVG filters – specifically the turbulence and component transfer primitives.