CreditCard
A fully customizable, interactive Credit card that flips to reveal a back side on hover or click. Perfect for checkout previews, portfolio elements, or any project that need
Make it with Workshop
Build your own component with AI
A fully customizable, interactive Credit card that flips to reveal a back side on hover or click. Perfect for checkout previews, portfolio elements, or any project that need
Make it with Workshop
Build your own component with AI
CreditCard brings a sleek, credit/debit card inspired experience to Framer. Users can hover or tap to flip between the front and back sides, revealing hidden details or creative content.
✨ Key Features
Hover or Click Flip – Choose whether the back side shows on hover, click, or both.
Hide Mastercard Logo – Toggle the built-in card brand on/off for a cleaner look.
Flexible Fill Options – Fill the card background with:
Solid Colors – Pick any color from the color picker.
Gradients – Create multi-color linear gradients with adjustable angle (deg) and unlimited color stops.
Images – Upload any image or texture for a fully custom design.
Editable Details – Card number, holder name, expiry, CVV, or custom text.
Dynamic Text Color – Adjust for perfect contrast with your background.
Responsive & Smooth – Works seamlessly across desktop and mobile with Framer Motion animation.
⚡ Perfect Use Cases
Payment or checkout page mockups
SaaS onboarding or pricing demos
Portfolio cards with hidden info or CTAs
Finance, banking, or fintech websites
Interactive hero sections or product reveals
💡 Simple SetupDrag CreditCard onto your canvas, customize backgrounds, text, and flip behavior directly in the right-panel controls no coding required.
✨Customization:
