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.
CSS & JS Photo Filter
A large set of photo filters using CSS blend modes and Javascript for making adjustments.
See the Pen CSS & JS Photo Filter by erdemuslu (@erdemuslu) on CodePen.
Venetian Blinds Photo Effect
A cool 3D venetian blinds effect using CSS transform and JS.
See the Pen Venetian Blinds Photo Effect by mimikos (@mimikos) on CodePen.
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.
See the Pen Image Mosaic Effect With CSS Grids & Blend Modes by dudleystorey (@dudleystorey) on CodePen.
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.
See the Pen CSS Half-tone Photo Filter: 8 Luminance Levels by mullany (@mullany) on CodePen.
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.
See the Pen Glitch Photo CSS Filters by canti23 (@canti23) on CodePen.
Displacement Map Image Transition Done With CSS & JS
Scroll effect & photo transition test for a project using PIXI for Webgl abstraction.
See the Pen Displacement Map Image Transition Done With CSS & JS by flexmotion (@flexmotion) on CodePen.
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.
See the Pen Image Transitions Using SVG Filters by mullany (@mullany) on CodePen.
Image Transition On Scroll (GSAP)
Some cool CSS transitions applied on photos using quite a lot of Javascript.
See the Pen Image Transition On Scroll (GSAP) by pizza3 (@pizza3) on CodePen.
Image Split In Tiles Effect Using JS & Some CSS
A neat example of how you should split an image in tiles using JS and CSS for transitions.
See the Pen Image Split In Tiles Effect Using JS & Some CSS by supah (@supah) on CodePen.
Sliding Blinds Effects With The Hoff
Using CSS custom properties, we can get a pretty fun result.
See the Pen Sliding Blinds Effects With The Hoff by chriskirknielsen (@chriskirknielsen) on CodePen.
CSS3 Trendy Retro Photo Effect
This is how You can create a trendy retro photo effect with nice tricks of CSS3 filters and linear gradients. See without effect on hover.
See the Pen CSS3 Trendy Retro Photo Effect by Twikito (@Twikito) on CodePen.
CSS Gradient Hover Effect
A quick proof of concept for a hover effect utilizing mix-blend-mode and CSS gradients.
See the Pen CSS Gradient Hover Effect by jondaiello (@jondaiello) on CodePen.
CSS Photo Effect
A cool mix of CSS blending modes giving off a 3D effect.
See the Pen CSS Photo Effect by kataichan1975 (@kataichan1975) on CodePen.
Photo Effect Gallery
Quite a few examples of photo filter functions using just CSS.
See the Pen Photo Effect Gallery by wg3design (@wg3design) on CodePen.
