Flip Card
3D flip on hover.
The code
A glimpse of the source:
index.html
<div class="card-flip-container">
<div class="card-flip">
<div class="card-flip-front">Front</div>
<div class="card-flip-back">Back</div>
</div>
</div>
</div>
🔒 Unlock the full code
Full HTML + CSS + JS, copy-paste-ready — with 800 more Premium effects.
Concrete use cases
A few real contexts where Flip Card shines:
- An e-commerce product grid
- A projects portfolio
- A stats dashboard
How it works
Pure CSS effect — no JavaScript dependency. It relies on CSS transforms.
Make it yours
You can tweak:
- the colors, size and timing straight in the CSS
Add it in 3 steps
- Paste the HTML where you want the effect on your page.
- Add the CSS to your stylesheet (or in a <style> tag).
- Tweak the colors and CSS variables to match your brand — nothing to install.
Browser support
Works in every modern browser (Chrome, Firefox, Safari, Edge). Responsive, with graceful degradation.
More Cards effects
Browse all Cards effects →FAQ
Is the code free?
This effect is part of the Premium library (801 effects, copy-paste-ready code). Around 70 effects are free.
How do I add it to my project?
Copy the HTML, CSS and JS and paste them in. No dependencies, works with any framework.
Does it work on mobile?
Yes — the effects are responsive and degrade gracefully.