Holographic cards
· 2 min read
I wanted to recreate the feel of holographic trading cards on the web, using CSS masks, blend modes, and a bit of perspective.
Below is a small grid of cards using images I generated with ChatGPT. Move your mouse (or touch) to tilt and reveal the foil. Use the toggle to switch between different mask modes. For each, I've created an non-holo overlay manually, making some elements sit apart from the holographic card elements.
Menagerie
Caoman
Frostpup
Lantowl
Spineedle
Armola
Ghoulweed
Kelpless
Wombatik
Kitlune
Pyrelet
Thievican
Forest God
Jadu
Mindoak
Statree
Scrapyard
Holo scrap 1
Holo scrap 2
Holo scrap 3
Holo scrap 4
Holo scrap 5
Holo scrap 6
Holo scrap 7
Holo scrap 8
Wraestlung
Holo punch 1
Holo punch 2