Blur Vignette — Unique vignette overlay with edge blur

Perfect for hero sections, media-heavy layouts, and cinematic compositions.

With full control over shape, edges, colour, and intensity, Blur Vignette adapts effortlessly to both minimal and expressive designs.

Demo

Features

• Blur-based vignette overlay using backdrop blur

• Works seamlessly over images, videos, and layouts

• Supports ellipse, circle, and rectangle vignette shapes

• Independent edge control for rectangular vignettes

• Adjustable inset and smooth falloff for precise control

• Colour and intensity controlsare compatible with all CSS colour formats

• Lightweight and visually subtle—enhances focus without distraction

Customisations

• Shape selection: ellipse, circle, or rectangle

• Per-edge toggles for rectangle vignettes (top, right, bottom, left)

• Blur strength

• Inset distance

• Transition smoothness (falloff softness)

• Vignette color

• Vignette intensity

Usage

1. Place Blur Vignette on top of an image, video, or layout inside a Frame or Stack.

2. Set the component to fill the parent (pin it to all sides), so it fully covers the content.

3. Select a vignette shape and adjust the blur, inset, and smoothness to define the desired effect.

4. Experiment with the properties to achieve the desired look.

5. That's it!