About this component

A card with a visible, curved meniscus edge where liquid glass meets its container. Content appears to float inside the liquid volume, slightly magnified. Tilting the device (on mobile) or moving the cursor shifts the liquid and the content within. Light sources refract through the glass, casting small rainbows on adjacent elements.

Difficulty

Expert

Style

Apple Liquid Glass

Frameworks

HTML/CSS, Tailwind, React, Vue, Angular, Svelte, LWC

Embed this component

Paste this snippet into any site — the design renders in a sandboxed iframe served from /embed/prismatic-meniscus-card.