ToolsRail
Home
Shadow Generator
Tailwind Font Generator
About
Home
Shadow Generator
Tailwind Font Generator
About
Home
Tailwind Tools
Tailwind 3D Card Generator
Card Properties
Card Size
Customize the width and height of your card
Width
w-64
w-72
w-80
w-96
w-full
Height
h-80
h-96
h-auto
Card Depth (Elevation)
Adjust shadow for 3D depth effect
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
Hover Lift Effect
Make the card lift when hovered
hover:scale-105
hover:scale-110
hover:scale-125
Perspective & Rotation
Apply perspective and slight tilt
perspective-500
perspective-1000
Custom
rotate-1
rotate-2
rotate-3
-rotate-2
Border Radius
Customize corner roundness
rounded-none
rounded-sm
rounded
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
Background Options
Use solid colors, gradients, or images
Solid Color
Gradient
Image
White
Light Gray
Blue
Purple
Pink
Green
Yellow
Red
Left to Right
Top-Left to Bottom-Right
Top to Bottom
Bottom-Left to Top-Right
Blue to Purple
Green to Blue
Pink to Yellow
Purple to Pink
Yellow to Red
bg-cover
bg-contain
Glassmorphism Effect
Add transparency with blur
10% opacity
20% opacity
30% opacity
40% opacity
50% opacity
Slight blur
Medium blur
Large blur
Extra blur
Flip Effect
Enable flip animation
Horizontal
Vertical
0.3s
0.5s
0.7s
1.0s
Text Styling
Adjust typography settings
Small
Base
Large
Extra Large
2X Large
Normal
Medium
Semi-bold
Bold
White
Black
Dark Gray
Near Black
Blue
Purple
Green
Glow Effect
Add a colorful glow around the card
Blue Glow
Purple Glow
Green Glow
Pink Glow
Yellow Glow
Border & Outline
Add outlines to the card
1px
2px
4px
8px
Light Gray
Dark Gray
Blue
Purple
Pink
White
Animated Tilt on Hover
Apply interactive tilt effect
Slight Tilt
Medium Tilt
Strong Tilt
Interactive Press Effect
Simulate a press effect on click
Slight Press
Medium Press
Strong Press
Responsive Design
Ensure proper scaling on different screen sizes
Full Width
sm:w-48
sm:w-56
sm:w-64
lg:w-80
lg:w-96
lg:w-auto
Add Image/Avatar
Include an image inside the card
Top
Center
Bottom
Theme Mode
Preview in light or dark mode
Light
Dark
Preview
Card Title
This is a preview of your 3D card. Customize it using the options on the left.
Generated Tailwind Classes
Copy Code
Copied!