Components
Starting preview...
Small glass CSS effect that I use on my website for a wow effect.
npx shadcn@latest add https://21st.dev/r/cult-ui/glass-effectimport { Glass } from "@/components/ui/glass-effect"
function GlassDemo() {
return (
<div className="min-h-screen w-full flex items-center justify-center p-4">
<div className="relative w-[400px] h-[400px] rounded-xl overflow-hidden">
<div className="w-full h-full overflow-auto">
<img
src="https://images.unsplash.com/photo-1534796636912-3b95b3ab5986"
alt="Background"
className="w-full min-h-[800px] object-cover"
/>
</div>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none">
<Glass>
<span className="absolute inset-0 flex items-center justify-center text-white/80 font-medium">
Scroll to see effect
</span>
</Glass>
</div>
</div>
</div>
)
}
export { GlassDemo }