# image effects Image effects are transformations applied to bitmap images or selected image areas, including blur, sharpening, brightness, contrast, color, distortion, and related visual adjustments. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## 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.