Blur Vignette

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

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 Blur Vignette Component Preview 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 Place Blur Vignette on top of an image, video, or layout inside a Frame or Stack. Set the component to fill the parent (pin it to all sides), so it fully covers the content. Select a vignette shape and adjust the blur, inset, and smoothness to define the desired effect. Experiment with the properties to achieve the desired look. That's it!

Vignette Overlay with Edge Blur