simeydotme /pokemon-cards-css

A collection of advanced CSS styles to create realistic-looking effects for the faces of Pokemon cards.

★ 8,347⑂ 809👁 47⑃ 16● 28▤ 0
CSSCreated 2022-06-21poke-holo.simey.me/
8,347
stars
+0+3+74
809
forks
47
watchers
16
prs
28
issues
0
releases
–
discussions

README

Pokémon Cards Holographic effect in CSS

This is a repository holder for the Pokemon Cards CSS Holographic effect.  

|  | As seen on css-tricks.com and codepen 
| --: | :-- |
|  | Demo running @ https://poke-holo.simey.me/   |
|  | 151 version @ https://poke-151.simey.me/ ⭐ |



-----

 [!TIP]
 I've published a component which can help with getting you a similar effect to this, without much effort;  
 https://github.com/simeydotme/hover-tilt 

---

 A collection of advanced CSS styles, applied with SvelteJS.
Uses CSS Transforms, Gradients, Blend-modes and Filters to simulate the various Holofoil effects found
in the Sword and Shield era of Pokemon Trading Cards.





---

 [!NOTE]
 Please read issues/19 before asking / requesting any help or advice on the Project.  
Thank you.


---

 support / tip  
If you think this is super cool, or useful, and want to donate a little, then you are also super cool!

|  |  |         |
|--|--:|---------|
|  |  | £1 tip |
|  |  | £5 tip |
|  |  | £10 tip |





---
 attribution

- Galaxy Holo from aschefield101  
- Some backgrounds from Vecteezy

Snapshot: 2026-11-04T14:00:00Z · Data license Apache-2.0 · JSON