About LiquidGlass FlipCard
About
Liquid Glass Flip Card is a free Framer code component that turns a simple content card into a tactile 3D reveal. Hover to turn it from the edge your cursor enters, or choose Click mode for a deliberate tap. The glass blurs the background as a light sweep, prism rim and soft shadow follow the motion. Show an introduction on the front, then reveal details and an optional link on the back.
What you can customize
Edit each side’s label, title and text, or replace either face with a connected Framer layer. Choose horizontal or vertical flipping, the starting side, hover or click trigger, swipe/drag behavior and flip-button visibility. Set a whole-card link in Hover mode or a back-button link. Tune the spring, liquidity, hover tilt, glass depth, refraction, frost, prism light, tint, shadow, typography, radius and padding. Clear, Frosted and Tinted materials suit manually chosen On Light or On Dark surfaces.
It works on touch and keyboard, with focus and reduced-motion states. Glass stays responsive across browsers, with enhanced edge refraction in supported Chromium browsers.
Great for (examples)
Add an interactive reveal to:
Portfolio projects and case-study teasers
Product highlights and launch pages
SaaS feature cards and benefit sections
Creative studio services and agency sites
Team introductions and personal websites
Question-and-answer or summary/detail cards
Numbered process steps and value statements
Glassmorphism layouts
Share your build
Using it on your site? Tag @Matthias_Oel on X or send me a link. I’d love to see your version.
Need help?
Questions or feedback? Reach me at matthias@lmvision.de or on X @Matthias_Oel.
Need a matching component?
Carry the glass effect into the rest of your page:
