Frost Blurred
Stacked, masked backdrop-filter layers that frost content along an edge.
3.9 KB
•Updated on September 16, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-frost-blurredUsage
Code
import { FrostBlurred } from '@/components/spaceui/frost-blurred'
export default function Hero() {
return (
<FrostBlurred height="62%" side="bottom">
<h1 className="text-8xl font-medium">UImaxxing</h1>
</FrostBlurred>
)
}Without children, render it as an overlay on a relative parent:
Code
<div className="relative">
<img src="/cover.jpg" alt="" />
<FrostBlurred className="absolute inset-x-0 bottom-0" height="40%" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
layers | number | 7 | Stacked progressive blur layers. |
strength | number | 1 | Multiplier on each layer's blur radius. |
height | string|number | 62% | Overlay height (or width if left/right). |
side | top|bottom|left|right | bottom | Edge the frost grows from. |
tint | number | 0 | Optional theme background mix (0 for pure glass). |
opacity | number | 0.9 | Layer opacity. |
children | React.ReactNode | — | Content to frost. Omit to use as a pure overlay. |
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
On This Page