# 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/ ⭐ |
-----
> [!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](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!
| | | |
|--|--:|---------|
| 
| [](https://www.paypal.com/paypalme/simey/1) | [£1 tip](https://www.paypal.com/paypalme/simey/1) |
| | [](https://www.paypal.com/paypalme/simey/5) | [£5 tip](https://www.paypal.com/paypalme/simey/5) |
| | [](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)