Premium
Holographic Foil Card
A collectible foil card tooltip that tilts in and settles flat while a bright sheen sweeps across once, then its iridescent foil keeps drifting. The foil colors are mixed from the accent.
Also known as: holographic tooltip css, foil card hover effect, iridescent tooltip, shiny card tooltip.
Founder editionNo. 0042 of 500
Premium
Unlock the HTML and CSS
Everything you see above is live. Basic and Pro include every premium piece, with the HTML and CSS ready to copy, plus the Tailwind version where there is one and Motions in Claude Code on Pro.
Customizing this snippet
- Color: set
--tip-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--tip-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.