# CSS Image Effects #3: Vignettes 3 Ways

DevFeed: [CSS Image Effects #3: Vignettes 3 Ways](<https://devfeed.tech/articles/css-image-effects-3-vignettes-3-ways-28851.md>)

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

Published: 2015-10-09T00:00:00Z

Content type: tutorial

Language: en

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

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [image effects](<https://devfeed.tech/topics/image-effects.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [effect](<https://devfeed.tech/tags/effect.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [image-effects](<https://devfeed.tech/tags/image-effects.md>)

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