Instant CSS
Tools
Templates
Components
Learn
More
Zoom In
Animation
Scales up from small to full size with a fade.
Reset to Default
HTML
Copy HTML
<div class="zoom-card">Zoom In</div>
CSS
Copy CSS
.zoom-card { padding: 20px 32px; background: linear-gradient(135deg, #2563eb, #4f46e5); color: white; font-family: sans-serif; font-weight: 700; border-radius: 14px; animation: zoomIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; } @keyframes zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } to { transform: scale3d(1, 1, 1); } }
Live Preview
Zoom In
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.