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:

• Liquid Glass Nav Pro

• Particle Hover Card

• Explore all components →