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
