——Card · Free
Liquid Glass Card
A frosted glass card with real refraction — the backdrop distorts through an SVG displacement filter, not just blur. The post-Apple "Liquid Glass" look spreading across 2025/2026 sites. Refraction is Chromium-only (Chrome/Edge/Brave) by current browser support; Safari/Firefox get a clean plain frosted-glass fallback automatically, no broken state.
Liquid glass
export function LiquidGlassCard({ children }) {
return (
<div className="relative flex h-[150px] w-full max-w-[320px] items-center justify-center overflow-hidden rounded-2xl">
<svg aria-hidden className="absolute h-0 w-0">
<filter id="liquid-glass-distort" colorInterpolationFilters="sRGB">
<feTurbulence type="fractalNoise" baseFrequency="0.008 0.06" numOctaves="2" seed="7" result="noise" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="28" xChannelSelector="R" yChannelSelector="G" />
</filter>
</svg>
<div
aria-hidden
className="absolute inset-0"
style={{ background: "conic-gradient(from 120deg, #4fa0ff, #9f7bff, #38e8b0, #ff7bd8, #4fa0ff)" }}
/>
<div className="liquid-glass relative flex h-[92px] w-[220px] items-center justify-center overflow-hidden rounded-2xl border border-white/25">
{/* Chromium-only refraction layer — Safari/Firefox silently keep just the blur above */}
<div className="liquid-glass-distort pointer-events-none absolute inset-0" />
<span className="relative text-[13px] font-medium text-white drop-shadow-sm">
{children}
</span>
</div>
<style>{`
.liquid-glass {
backdrop-filter: blur(4px) saturate(150%);
-webkit-backdrop-filter: blur(4px) saturate(150%);
background: rgba(255,255,255,0.08);
box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 8px 24px rgba(0,0,0,0.25);
}
.liquid-glass-distort {
backdrop-filter: url(#liquid-glass-distort) blur(0.5px);
-webkit-backdrop-filter: url(#liquid-glass-distort) blur(0.5px);
}
`}</style>
</div>
);
}How it works
Liquid Glass Card is a hand-built card component for React, styled with Tailwind and animated with Framer Motion — no heavy dependency tree, no 60-package install. Drop it in, keep your bundle lean, and it stays performant on real devices. It's free — copy the code above and ship it.
← Browse all components