Credit Card

Interactive 3D credit card with parallax tilt and hover effects

credit-card-tw

1234567890123456

CARDHOLDERJOHN DOE

EXPIRES12/25

CVV123

Customize

Tweak the props live

Card Information

Card Number

Cardholder Name

Expiration Date

CVV

Appearance

Text Color

#000000

Background

Scale1.2

Border Radius16px

Text Shadow

Effects & Interaction

Rotation Intensity1

Parallax Intensity1

Scale on Hover1.05

Show Shine

Show Shadow

Show Action Buttons

Props

Name	Type	Default	Description
`cardNumber`	string	`"1234 5678 9012 3456"`	Card number (will be automatically formatted with spaces)
`cardholderName`	string	`"JOHN DOE"`	Name of the cardholder displayed on the card
`expirationDate`	string	`"12/25"`	Card expiration date in MM/YY format
`cvv`	string	`"123"`	CVV code (3 digits) shown on the back when card is flipped
`cardLogo`	string	`undefined`	URL for card company logo (Visa, Mastercard, etc.)
`chipImage`	string	`undefined`	URL for card chip image (optional)
`background`	string	`random gradient`	CSS gradient or color for card background
`textColor`	string	`"#ffffff"`	Color for all text on the card
`hasTextShadow`	boolean	`true`	Enable text shadow on card number, name, and expiration date
`scale`	number	`1.2`	Scale factor for card size (maintains aspect ratio)
`rotationIntensity`	number	`1`	Multiplier for the 3D rotation effect intensity (0-2)
`parallaxIntensity`	number	`1`	Multiplier for the parallax layer movement intensity (0-2)
`scaleOnHover`	number	`1.05`	Scale factor applied when hovering over the card
`showShine`	boolean	`true`	Enable or disable the dynamic shine gradient effect
`showShadow`	boolean	`true`	Enable or disable the shadow effect
`borderRadius`	number	`16`	Border radius of the card in pixels
`showActionButtons`	boolean	`false`	Show action buttons below card (eye to toggle visibility, copy to clipboard)
`className`	string	`""`	Additional CSS classes to apply to the wrapper
`cardClassName`	string	`""`	Additional CSS classes to apply to the card element
`buttonsClassName`	string	`""`	Additional CSS classes to apply to the action buttons container

cardNumberstring

Card number (will be automatically formatted with spaces)

Default:"1234 5678 9012 3456"

cardholderNamestring

Name of the cardholder displayed on the card

Default:"JOHN DOE"

expirationDatestring

Card expiration date in MM/YY format

Default:"12/25"

cvvstring

CVV code (3 digits) shown on the back when card is flipped

Default:"123"

cardLogostring

URL for card company logo (Visa, Mastercard, etc.)

Default:undefined

chipImagestring

URL for card chip image (optional)

Default:undefined

backgroundstring

CSS gradient or color for card background

Default:random gradient

textColorstring

Color for all text on the card

Default:"#ffffff"

hasTextShadowboolean

Enable text shadow on card number, name, and expiration date

Default:true

scalenumber

Scale factor for card size (maintains aspect ratio)

Default:1.2

rotationIntensitynumber

Multiplier for the 3D rotation effect intensity (0-2)

Default:1

parallaxIntensitynumber

Multiplier for the parallax layer movement intensity (0-2)

Default:1

scaleOnHovernumber

Scale factor applied when hovering over the card

Default:1.05

showShineboolean

Enable or disable the dynamic shine gradient effect

Default:true

showShadowboolean

Enable or disable the shadow effect

Default:true

borderRadiusnumber

Border radius of the card in pixels

Default:16

showActionButtonsboolean

Show action buttons below card (eye to toggle visibility, copy to clipboard)

Default:false

classNamestring

Additional CSS classes to apply to the wrapper

Default:""

cardClassNamestring

Additional CSS classes to apply to the card element

Default:""

buttonsClassNamestring

Additional CSS classes to apply to the action buttons container

Default:""