Building a holographic card

In 2021, during the NFT craze, I worked with a friend on an idea involving trading cards of fun moments with each other.

We made trading cards of photos from a recent party and based on how funny or memorable the moment was, we added rarities to the cards. We took these cards and then put them in packs our friends could buy for the cheap price of $5 each pack. It was supposed to be a fun way to fundraise our next group outing.

I really wanted to wow my friends with the cards, after all it should be exciting to open a pack and get a rare card. The rarest cards therefore had a holographic effect. At the time I thought they were pretty cool, but I wanted to build something better.

In this post, I'll go over how I made the card below.

Interact with me!

Hover (or drag on mobile) over the card below to see a cool effect.

This is fine

This is juuuust fine, no fire here, no sir.

The original card

When I first started this experiment, I didn't even know how to write JavaScript. Seriously, not a lick, I had been mostly a Python guy, so JS wasn't in my toolbox. I ended up using this library called VanillaTilt and messed around with it to create the card below.

Holographic card

Hover over the card!

Sample Card

description

Let's take a look at how this works. Using VanillaTilt we add an extra layer to the card div, this is where the holographic effects sits. The card div has a basic background image to have the card design then, we add two divs for the info and image.

We can break down the effect into two divs. One applies the holo effect, and the bottom layer holds the card design and the text & image divs.

To get the holographic effect while tilting the card, we blow up the background shift it around based on the mouse or tilt angle.

The general CSS for it is below:

.holo {
  background-image: linear-gradient(
    115deg,
    transparent 15%,
    #00e7ff 42%,
    #eb8bff 58%,
    transparent 85%
  );
  background-size: 300% 300%;
  mix-blend-mode: color-dodge;
  filter: brightness(0.75) contrast(1.5);
}

Building something better

At the time I thought this was a pretty good attempt at a holographic effect. In hindsight, it feels lacklustre. I want to make something better, but first I wanted to understand why it felt so mid.

I spent some time looking at a friend's Pokemon cards and distilled it down to this: the lack of dynamism. What's happening is that the effect is being applied to every surface of the card below in a uniform way. In reality, when light hits the card, it's interacting differently with each material. Some areas have a metallic look, some don't.

We'll do something similar, we'll build an effect for the borders and then another for the image itself.

We need to target different areas of the card with different effects.

The border holo

Building the border holo is actually straightforward. We just replicate our original effect but just for the borders. We can create a basic holo effect on top the background that we have. Similarly, as we move the mouse around we can set the gradient to move around simulating that holographic effect.

In order to make sure it doesn't effect anything else, we then layer over the rest of the card design on top as an SVG. That way only the border behind is moving, while the SVG layer occludes the rest of the effect.

By adding an SVG layer on top, we can isolate the effect only to the border and not the entire card.

The image holo

The image holo is trickier, we don't want to simply replicate the border holo here, instead we want something that's more tailored for the image. Using just a gradient wouldn't be enough because then we're sort of stuck using the same effect throughout.

We can get a more special effect if we use filters and layering to our advantage.

Using a combination of gradients and filters, we get a metallic effect.

A gradient with a difference filter and varying opacities
A simple gray background (#efefef)
The above wrapped in a color-dodge filter

After a ton of experimentation, I found a combination of layers and gradients, that gave the effect I was looking for. It turned out that in this case, less was more. By tactically including gradients and filters in areas I thought made sense, the effect turned out better and more life-like.

The final card can be seen and experimented with below.

Final card

Explode

Test card

test desc

Hover (or drag on mobile) the card to see the new effects. Click on Explode and hover over each layer to see how it works.

Being honest, this experiment took much longer than I had initially expected. I spent most of my time tinker with different filters, gradients, and combinations before I came to an effect I really liked. The (maybe) easier path here is to just build a shader and use Three.js to render a card with some material properties. But I think it's pretty cool that we can get a pretty rad effect with just CSS.