---
title: "CreditCard — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Cards. Flip credit card with gradient & image"
canonical: "https://framer.elliotli.dev/component/creditcard"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/CreditCard

# CreditCard

Flip credit card with gradient & image

[View on Framer](https://framer.com/marketplace/components/creditcard/?via=elliot-li)

![CreditCard preview image 1](https://framer.elliotli.dev/og/component/creditcard/44d3376a1d6b891d/1600x1200.jpg)

## Summary

Flip credit card with gradient & image

## Description

An interactive flip credit card with hover or click trigger, gradient and image background support, and fully editable card details. Built for checkout mockups, fintech projects, SaaS demos, and portfolio elements that need a realistic interactive card.

## Features

-   Hover or click flip — choose trigger or enable both
    
-   Solid color, linear gradient or image background support
    
-   Gradient with adjustable angle and unlimited color stops
    
-   Editable card number, holder name, expiry, CVV and custom text
    
-   Toggle card brand logo on or off
    
-   Dynamic text color control for contrast on any background
    
-   Smooth Framer Motion flip animation
    
-   Responsive — desktop and mobile
    
-   No code needed — all controls in Framer panel
    

## Property Controls

**Card Details** — card number, holder name, expiry, CVV, custom text

**Flip Behavior** — hover, click or both trigger options

**Background** — solid color, gradient (angle + color stops), image upload

**Appearance** — text color, brand logo toggle

**Animation** — flip speed

## Use Cases

Checkout mockups · SaaS onboarding demos · Fintech and banking sites · Portfolio interactive elements · Payment flow prototypes · Hero section reveals · Pricing page UI

**SEO Keywords**

framer credit card · framer flip card · framer card component · framer interactive card · framer fintech component · framer card flip animation · framer checkout UI · framer payment card · framer debit card · framer gradient card · framer flip animation · framer banking component · framer card hover effect · framer code component · framer payment UI

✨Customization:

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-e5ghs6hv-TK2McYwQyOWGdUCd0SYYbnE8hxXYUj)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-e5ghs6hv-Awv18z28akG4GcgGNCaB1lKTNKJQjI)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-e5ghs6hv-Ja9H9kpTopgIIt7sszDye6LVaE7yhN)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-e5ghs6hv-t5Ep23tZf4QyjgMu0zP5scxWyAf6TZ)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-e5ghs6hv-tl95ABoJUc4P7Ly4Mytph2YwajWRhI)

## Rank history [How rankings work →](/terms#rankings)

-   All · #9333

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2025-10-02
- **Updated**: 2026-04-12
- **Added**: 2025-09-28
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator