Create Blur Vignette effects with pure CSS.

Anja Petry

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Blur Vignette effect in CSS is an overlay with backdrop-filter: blur() and a mask-image that creates the vignette. The mask is a combination of 6 gradients - 4 radial gradients for each corner and 2 linear gradients. The black areas mark the parts of our overlay that will be visible.

Blur Vignette effect in CSS

<p>pretty cool effect. thanks for sharing</p>
