Pokemon Cards ^V2

Common & Uncommon

All cards get a 3d rotation with CSS based on the cursor position.
The default basic non-holo cards simply apply a flare/glare effect to the card which follows the mouse.

Holofoil Rare

Holo cards have an additional vertical beam holo effect.
This uses a combintation of repeating gradients and filters, with clip-path to mask the holo areas for each stage. To get the holo effect to change while rotating the card I set the background-position of each gradient layer based on cursor.

Galaxy/Cosmos Holofoil

Similar to the Holofoil, but this uses a special image background of a galaxy effect with a gradient rainbow set to color-dodge & color-burn on top.

An instant classic for any PTCG fan!

Radiant Holofoil

The newest holofoil added to the series!
The radiant effect proved very difficult to emulate without crazy math, so I settled with a criss-cross linear gradient pattern that moves across the card.

Trainer Gallery Holofoil

The effect for Trainer Gallery holofoils gives it a kind of metallic effect with iridescent shine. This is achieved with a large color dodge linear gradient, and a hard-light radial gradient on top, at the cursor position, to give the shimmer.

Pokemon V

V cards have a diagonal holographic effect which that appears to travel in opposite directions when you tilt the card into the light.

This effect is achieved with multiple background gradients and I change the background positions based on the cursor x/y. The gradients are set to color-dodge, and there's a subtle svg noise effect.

Pokemon V ^{(Full Art)}

Similar to the Pokemon V effect, Full-Art cards use diagonal gradients, but they have additional texture when looked at from certain angles. This is achieved with an additional background image with an exclusion filter. The effect is also more vibrant which adds to the metallic look.

The texture effect is not identical to reality as the real cards each have a unique pattern that follows the art.

Pokemon V ^{(Alternate Art)}

Alternate Art Pokemon V cards have practically the same holo effect as the Ultra Rare (Full Art) cards. The only difference is the pattern texture.

The effect looks somewhat different though due to the type of artwork.

VMax

The gradient effect of Pokemon VMax is more subtle, using a larger background gradient which moves more slowly. But the texture effect is more pronounced.

VMax ^{(Alternate/Rainbow)}

There's some VMax cards which show a full, or alternate artwork. These are classed as "raindbow rare" and have a similar effect to the rainbow cards. It's a really vibrant and glittery overlay.

This is achieved with a background image of glitter/sparkles, and a texture pattern background image, sandwiching the usual linear gradients.

VStar

Again back to the diagonal gradients overlaying a texture, VStar are quite similar to teh Ultra Rare (Full/Alt) cards. The cards are generally brighter with a pastel hue, though, which makes the gradient and texture more subtle.

Trainer Holo ^{(Full Art)}

Again back to the diagonal gradients overlaying a texture, VStar are quite similar to teh Ultra Rare (Full/Alt) cards. The cards are generally brighter with a pastel hue, though, which makes the gradient and texture more subtle.

Rainbow Rare ^{(VMax, VStar)}

The Rainbow Rare is a super glittery effect on top of pastel gradients. This is achieved with a background image of glitter/sparkles and a color-burn/hard-light background blend for some pastel gradients.

Secret Rare ^(Gold)

GOLD! The effect from Rainbow is borrowed, except the color of the gradients, and the filter effects (hue) are different. There's also a different background image with a more subtle overlay. This gives a sparkly gold look which is very similar to reality!

Trainer Gallery ^{(V / VMax)}

The V and VMax cards in the Trainer Gallery are generally quite similar to the normal V and VMax cards, so here I've just tweaked the values a little and added a different background texture.