You need to enable JavaScript if you want to have fun.
Show Inputs

Change the various parameters

Playing Card Holo Effect

Inspired by this fantastic effect, I try to break down the whole effect to understand what. is. going. on. It is very impressive.

Card Image

We start with just the card image.

Texture Image

Next the texture comes from an image. This is it unscaled.

Texture Image Tiled

Texture scaled and tiled.

Rainbox Gradient 1

A lot of the shine comes from two rainbow gradients interacting. The first one.

Rainbox Gradient 2

The second one.

Radial Gradient

A radial gradient darkens the borders. Very faint but there.

Rainbox Gradients Combined

Blend modes give us both gradients combined.

All Gradients Combined

Texture and All Gradients Combined

All Four Backgrounds Combine with Background Position

All Four Backgrounds with Filter

All Four Backgrounds with Mix-Blend-Mode: Color Dodge

Card Shine

Card Shine Pseudo Element After Only

This is where the magic happens. We offset the card shine element and its after element.

The after element moves in the opposite direction of the shine element.

background-position: center, 0% var(--posy), calc( var(--posx) * -1) calc( var(--posy) * -1), var(--posx) var(--posy);

Where the two lines intersect with the additive blend mode, it makes the bright rainbows.

Because the two layers move in opposite directions, it makes a 'randomish' pattern of changing location and color.

Card Shine + Card Shine After Pseudo Element

Doing this again with a pseudo element and another blend mode really brings it home.

Card Image + Card Shine + After Pseudo Element

Other Examples of Cards