CSS Image Vignette effect

Question

So, I'm trying to apply this effect on an image using CSS where it's like Vignette effect, but instead of just shadows, the edges gradually dissolve outwards into the background.

What I mean is, exactly like this image below

I want to apply the effect they have put on "Maps" image (ignore the Pin location), like how those edges have dissolved with the blue background.

I have tried using Box-shadows as follow

TestImageProp: {
boxShadow: '0 0 200px rgba(0,0,0,0.9) inset',
border: 'none',
height: '700px',
width: '700px'}

and

<div className="TestImageProp">
  <img src={TestImage} alt="ArtBackground" height="700px" width="700px"/>
</div>

But not getting the desired output. This is what I'm getting instead

Can you give us a working snippet? – Scurgery Dec 26 '20 at 17:01 — Scurgery, Dec 26 '20 at 17:01

score 2 · Accepted Answer · answered Dec 26 '20 at 17:04

2

For me the maps image looks as if the opacity has a circular gradient.

Find the solution here: Add circular fading opacity (vignette effect) to images in CSS

answered Dec 26 '20 at 17:04

Alexander Dobernig

753
6
21

Yup! This is the one, thank you very much for pointing me towards the right direction. Much appreciated! – Jack621311 Dec 27 '20 at 05:08

CSS Image Vignette effect

1 Answers1