Categories: css-tricks.com

Holographic Trading Card Effect

Simon Goellner (@simeydotme)’s collection of Holographic Trading Cards have captured our attention.

Under the hood there is a suite of filter(), background-blend-mode(), mix-blend-mode(), and clip-path() combinations that have been painstakingly tweaked to reach the desired effect. I ended up using a little img { visibility: hidden; } in DevTools to get a better sense of each type of holographic effect.

Josh Dance (@JoshDance) replied with a breakdown of the effects that lets you manually control the inputs.

To Shared LinkPermalink on CSS-Tricks


Holographic Trading Card Effect originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

hnikoloski

Share
Published by
hnikoloski

Recent Posts

Demystifying Screen Readers: Accessible Forms & Best Practices

This is the 3rd post in a small series we are doing on form accessibility.…

4 weeks ago

Managing User Focus with :focus-visible

This is going to be the 2nd post in a small series we are doing…

1 month ago

The Power of :has() in CSS

Hey all you wonderful developers out there! In this post we are going to explore…

2 months ago

Accessible Forms with Pseudo Classes

Hey all you wonderful developers out there! In this post, I am going to take…

2 months ago

Passkeys: What the Heck and Why?

These things called passkeys sure are making the rounds these days. They were a main attraction at W3C…

1 year ago

Some Cross-Browser DevTools Features You Might Not Know

I spend a lot of time in DevTools, and I’m sure you do too. Sometimes…

1 year ago