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
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