Apple Vision Pro-inspired blur-sm vignette effect for creating stunning visual overlays. Apply beautiful blur-sm effects to images, videos, cards, and UI elements. Features customizable intensity, smooth transitions, and modern glassmorphism design aesthetics.
Read Docs to know more Blur Vignette
npx uilayouts@latest add blur-vignette
| Prop | Type | Default | Description |
|---|---|---|---|
classname | string | Optional CSS class for styling the main vignette container. | |
children | React.ReactNode | The content to display inside the vignette effect. | |
radius | string | 24px | The radius for the vignette effect. |
inset | string | 20px | The inset value for the vignette effect. |
transitionLength | string | 44px | The length of the transition effect applied to the vignette. |
blur-sm | string | 6px | The blur amount for the vignette effect. |
blurclassname | string | Optional CSS class for styling the blur effect container. |
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis, quaerat ab? Rerum facilis dignissimos voluptatum!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis, quaerat ab? Rerum facilis dignissimos voluptatum!
