# 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](<https://devfeed.tech/articles/web-image-effects-performance-showdown-28844.md>)

Original publisher: [Read original article](<https://una.im/smashing-perf/>)

Published: 2016-05-19T00:00:00Z

Content type: comparison

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [image effects](<https://devfeed.tech/topics/image-effects.md>), [Canvas](<https://devfeed.tech/topics/canvas.md>), [CSS](<https://devfeed.tech/topics/css.md>), [SVG](<https://devfeed.tech/topics/svg.md>), [HTML](<https://devfeed.tech/topics/html.md>), [implementation](<https://devfeed.tech/topics/implementation.md>)

Tags: [canvas](<https://devfeed.tech/tags/canvas.md>), [compare](<https://devfeed.tech/tags/compare.md>), [css](<https://devfeed.tech/tags/css.md>), [effects](<https://devfeed.tech/tags/effects.md>), [html](<https://devfeed.tech/tags/html.md>), [image](<https://devfeed.tech/tags/image.md>), [image-effects](<https://devfeed.tech/tags/image-effects.md>), [implementation](<https://devfeed.tech/tags/implementation.md>), [performance](<https://devfeed.tech/tags/performance.md>), [post](<https://devfeed.tech/tags/post.md>), [svg](<https://devfeed.tech/tags/svg.md>), [web](<https://devfeed.tech/tags/web.md>)

## 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.