https://github.com/simeydotme/pokemon-cards-css

A collection of advanced CSS styles to create realistic-looking effects for the faces of Pokemon cards.
https://github.com/simeydotme/pokemon-cards-css

blend-modes css filter gradient holo holographic pokemon svelte sveltejs transform

Last synced: 10 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/simeydotme/pokemon-cards-css
• Owner: simeydotme
• License: gpl-3.0
• Created: 2022-06-20T17:34:46.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2025-04-03T10:55:06.000Z (18 days ago)
• Last Synced: 2025-04-04T13:05:15.032Z (17 days ago)
• Topics: blend-modes, css, filter, gradient, holo, holographic, pokemon, svelte, sveltejs, transform
• Language: CSS
• Homepage: https://poke-holo.simey.me/
• Size: 116 MB
• Stars: 5,920
• Watchers: 34
• Forks: 552
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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](https://css-tricks.com/holographic-trading-card-effect/) and [codepen](https://codepen.io/simeydotme/pen/abYWJdX) 

| --: | :-- |

| [](https://poke-holo.simey.me/) | Demo running @ https://poke-holo.simey.me/   |

| [](https://poke-151.simey.me/) | 151 version @ https://poke-151.simey.me/ ⭐ |

### 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](https://github.com/simeydotme/pokemon-cards-css/issues/19) 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 One Pound tip](https://user-images.githubusercontent.com/2817396/149629980-08b9a952-bd6a-4c23-be78-05e3fd534352.png)](https://www.paypal.com/paypalme/simey/1) | [£1 tip](https://www.paypal.com/paypalme/simey/1) |

|  | [![£5 Five Pounds tip](https://user-images.githubusercontent.com/2817396/149629994-3a99770c-d333-46e7-9818-ab6b18ad0202.png)](https://www.paypal.com/paypalme/simey/5) | [£5 tip](https://www.paypal.com/paypalme/simey/5) |

|  | [![£10 Ten Pounds tip](https://user-images.githubusercontent.com/2817396/149630000-95aa4234-ff67-4e7c-a7f4-ffd52f25e6d8.png)](https://www.paypal.com/paypalme/simey/10) | [£10 tip](https://www.paypal.com/paypalme/simey/10) |

---

#### attribution

- Galaxy Holo from [aschefield101](https://www.deviantart.com/aschefield101/art/HoloSheet-2012-313543843)  

- Some backgrounds from [Vecteezy](https://www.vecteezy.com/free-photos)