.gradual-blur-inner {
position: relative;
width: 100%;
height: 100%;
}
.gradual-blur-inner > div {
-webkit-backdrop-filter: inherit;
backdrop-filter: inherit;
}
.gradual-blur {
isolation: isolate;
}
@supports not (backdrop-filter: blur(1px)) {
.gradual-blur-inner > div {
background: rgba(0, 0, 0, 0.3);
opacity: 0.5;
}
}
.gradual-blur-fixed {
position: fixed !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1000;
}
npx shadcn@latest add @react-bits/GradualBlur-TS-CSSimport { GradualBlurTSCSS } from "@/components/GradualBlur-TS-CSS"<GradualBlurTSCSS />