Skip to content
Back to the feed
0:000:33
Rank#23

Post by jhey ʕ•ᴥ•ʔ

Jʔ

jhey ʕ•ᴥ•ʔ

@jh3yy

Open on X

css holographic trading card breakdown 🧑‍🍳 a combo of masked layers with mix-blend-mode pointer position drives the scale/translate of the colored gradients 🌈 check the layers 👇

Why it is here

A layer-by-layer breakdown of a CSS holographic card: masked layers, blend modes and pointer-driven gradients.

Likes
1,1151.1K
Replies
29
All-time rank
#23
Week
W312025
Went viral
Posted on X
Web#css#holographic#mix-blend-mode

The digest

Get posts like this in your inbox every morning.

Get Pro
See the category
Post by jhey ʕ•ᴥ•ʔ: CSS Tip! 🤙

You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥

article { anc
0:26
Jʔ

jhey ʕ•ᴥ•ʔ

@jh3yyInteraction

Likes:4.8K
Post by Steve Schoger: ✨ Redesigned the W3Schools website for fun.
Image
SS

Steve Schoger

@steveschogerWeb

Likes:3.3K
Post by Bardhyl Bytyqi: If you design with AI, save this

1. modulify.ai — best vibecoding tool
2. landdding.com — top notch landings
3. modulif
0:22
BB

Bardhyl Bytyqi

@BardhylBytyqiWeb

Likes:2.4K