# image effects Published articles for image effects. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Building an Infinite Loom: Unravelling Images into Threads with Three.js DevFeed: [Building an Infinite Loom: Unravelling Images into Threads with Three.js]() Original publisher: [Read original article]() Author: Clément Grellier Published: 2026-09-05T12:50:25Z Content type: tutorial Language: en Sources: [Codrops]() Topics: [Web Development]() Tags: [creative-coding](), [creative-web-experiments](), [digital-art](), [frontend-animation](), [generative-art](), [glsl-shaders](), [gsap](), [html](), [image-animation](), [image-distortion](), [image-effects](), [image-slider](), [images](), [infinite-slider](), [interactive-images](), [interactive-web-design](), [javascript-animation](), [marquee](), [playground](), [ribbon-animation](), [shader-effects](), [shaders](), [thread-animation](), [three-js](), [three-js-demo](), [three-js-shaders](), [unraveling-effect](), [webgl](), [webgl-animation](), [webgl-demo]() ### AI overview A Three.js tutorial for an infinite image strip whose cards are split into independently animated horizontal ribbons. It explains how separate geometry and shaders create weaving, unraveling, gaps, fading, and varied thread motion. ### Source excerpt An experimental Three.js demo that transforms images into flowing ribbons, weaving them together and unraveling them as they move across the screen. ## ESP\_IMAGE\_EFFECTS v1.0.0 Release: Image Processing for Embedded Devices DevFeed: [ESP\_IMAGE\_EFFECTS v1.0.0 Release: Image Processing for Embedded Devices]() Original publisher: [Read original article]() Author: John Lee Published: 2025-08-29T00:00:00Z Content type: release Language: en Sources: [Blog on Developer Portal]() Topics: [Image processing](), [Library](), [Embedded Software Dev](), [Microcontroller]() Tags: [blog](), [embedded-systems](), [image-color-space](), [image-crop](), [image-effects](), [image-processing](), [image-rotate](), [image-scale](), [library](), [multimedia](), [release](), [rotation](), [zero-copy]() ### AI overview Espressif announces ESP_IMAGE_EFFECTS v1.0.0, an image processing library for embedded devices. The article describes its unified APIs, SIMD optimization, zero-copy memory design, and support for rotation, color space conversion, and image scaling. ### Source excerpt Espressif's ESP_IMAGE_EFFECTS component is a powerful image processing library that can do common image processing operations such as scaling, rotation, cropping, and color space conversion. This article introduces the library, shows how to use it in processing images, and provides usage examples. ## Comparing Grayscale Image Effects in Canvas, SVG, CSS Filters, and CSS Blend Modes DevFeed: [Comparing Grayscale Image Effects in Canvas, SVG, CSS Filters, and CSS Blend Modes]() Original publisher: [Read original article]() Published: 2016-05-19T00:00:00Z Content type: comparison Language: en Sources: [Una Kravets]() Topics: [image effects](), [Canvas](), [CSS](), [SVG](), [HTML](), [implementation]() Tags: [canvas](), [compare](), [css](), [effects](), [html](), [image](), [image-effects](), [implementation](), [performance](), [post](), [svg](), [web]() ### AI overview This article compares implementations of the grayscale image effect using HTML canvas, SVG, CSS filters, and CSS blend modes. ### Source excerpt This post for Smashing Magazine looks at one of the most popular image effects, grayscale, to compare its implementation in HTML canvas, SVG, CSS filters, and CSS blend modes. ## CSS Image Effects #6: Infrared Photography DevFeed: [CSS Image Effects #6: Infrared Photography]() Original publisher: [Read original article]() Published: 2015-11-07T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [image effects](), [Code]() Tags: [code](), [css](), [effects](), [examples](), [image-effects]() ### AI overview This tutorial explains how to recreate a faux infrared photography effect with CSS filters, blend modes, duplicated images, inversion, color blending, and hue adjustments. It also presents a reusable mixin for applying the effect. ### Source excerpt In the final post of the CSS Image Effects series, we explore the beautiful, surreal world of infrared photography by creating our own faux effect. ## CSS Image Effects #5: Lomography DevFeed: [CSS Image Effects #5: Lomography]() Original publisher: [Read original article]() Published: 2015-11-02T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [image effects](), [modern web development]() Tags: [css](), [filter](), [image-effects](), [photography](), [techniques]() ### AI overview A tutorial on recreating the Lomography photography effect with CSS image filters, blur, saturation, contrast, hue rotation, and gradients for light leaks. ### Source excerpt A vibrant, unexpected, and fun effect -- the Lomography Effect is an opportunity where you can really be creative and try out various CSS image techniques. ## CSS Image Effects #4: Bokeh Textures DevFeed: [CSS Image Effects #4: Bokeh Textures]() Original publisher: [Read original article]() Published: 2015-10-18T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [image effects](), [modern web development]() Tags: [css](), [effect](), [how-to](), [image-effects](), [patterns](), [photography]() ### AI overview This tutorial explains how to recreate the visual illusion of bokeh photography with CSS. It covers layering image textures with blend modes, using gradients and box shadows to form blurred circles, positioning those circles, and combining them into patterns that can be randomized. ### Source excerpt Bokeh textures are very popular in photography. Let's take a look at how to create our own. ## CSS Image Effects #3: Vignettes 3 Ways DevFeed: [CSS Image Effects #3: Vignettes 3 Ways]() Original publisher: [Read original article]() Published: 2015-10-09T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [image effects](), [modern web development](), [Web Development](), [Code]() Tags: [code](), [css](), [effect](), [how-to](), [image-effects]() ### AI overview A tutorial explaining three CSS approaches for adding vignette effects to images: inset box shadows, radial gradients, and layered elements or pseudo-elements. It notes browser support and visual limitations of the methods. ### Source excerpt This week we'll take a look at one of the most popular photo manipulations: adding a vignette to draw attention to the center of an image. ## CSS Image Effects #2: 3D Glasses DevFeed: [CSS Image Effects #2: 3D Glasses]() Original publisher: [Read original article]() Published: 2015-10-05T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [image effects](), [color](), [3D]() Tags: [3d](), [css](), [effects](), [graphics](), [image-effects]() ### AI overview This tutorial explains how to recreate an anaglyph-style 3D photo effect in the browser using CSS blend modes. It describes combining red and cyan layers, separating them around the original image, and adding perspective to simulate depth. ### Source excerpt How do you make 3D-glasses-like graphics in the browser? We'll look at how blend modes work together to create this effect. ## CSS Image Effects #1: Vintage Washout DevFeed: [CSS Image Effects #1: Vintage Washout]() Original publisher: [Read original article]() Published: 2015-10-02T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [image effects](), [Web Development]() Tags: [color](), [css](), [image-effects](), [rgb]() ### AI overview The first post in a series explains how to create a vintage washout image effect with CSS. It describes lightening dark tones, using the lighten blend mode, and choosing a darkest color to reduce shadow detail. ### Source excerpt The first post in a series on creating custom image effects in CSS. We'll take a look at the vintage washout effect.