simeydotme/pokemon-cards-css

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

CSS

8,211

135 commits

updated Dec 15, 2025

poke-holo.simey.me

See the code

blend-modes

css

filter

gradient

holo

holographic

pokemon

svelte

sveltejs

transform

See what people are saying (1)

Newest first

Most points

Source	Message	Score	Date
	I made a tracker for my Pokémon binder, then got distracted making the cards shine (r/SideProject) I collect one card for every Pokémon, mixing sets and languages. I wanted to track what was in my binder and which exact cards I still wanted, so I ended up making dexli. It started as a checklist. Now there's a card grid, a binder view, wishlists and printable placeholders for the gaps. The…	2	Sep 19, 2026

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}

Contributors

128 commits

2 commits

1 commits

1 commits

Similar repos

chokcoco/CSS-Inspiration

CSS Inspiration，在这里找到写 CSS 的灵感！

10,851

chokcoco/iCSS

不止于 CSS

20,664

amruthpillai/SvelteKit-Pokedex

This is a project built using SvelteKit (based on the Svelte library) to browse through a list of…

vercel/satori

Enlightened library to convert HTML and CSS to SVG

13,961

jeffersoncgo/CoverMaker

Make Covers for Your Library

bradtraversy/design-resources-for-developers

Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI…

66,975

NeuralCoder3/custom_infinite_craft

A custom implementation of Infinite Craft (https://neal.fun/infinite-craft/)

Evirtual/css-3d-lab

Learn 3D effects in CSS/SCSS - live demos, explanations and copy-paste snippets. Pure CSS vs CSS +…

Languages

CSS

56.2%

Svelte

31.8%

Shell

7.0%

HTML

2.6%

JavaScript

2.4%

simeydotme/pokemon-cards-css

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

CSS

8,211

135 commits

updated Dec 15, 2025

poke-holo.simey.me

See the code

blend-modes

css

filter

gradient

holo

holographic

pokemon

svelte

sveltejs

transform

See what people are saying (1)

Newest first

Most points

Source	Message	Score	Date
	I made a tracker for my Pokémon binder, then got distracted making the cards shine (r/SideProject) I collect one card for every Pokémon, mixing sets and languages. I wanted to track what was in my binder and which exact cards I still wanted, so I ended up making dexli. It started as a checklist. Now there's a card grid, a binder view, wishlists and printable placeholders for the gaps. The…	2	Sep 19, 2026

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}

Similar repos

chokcoco/CSS-Inspiration

CSS Inspiration，在这里找到写 CSS 的灵感！

10,851

chokcoco/iCSS

不止于 CSS

20,664

amruthpillai/SvelteKit-Pokedex

This is a project built using SvelteKit (based on the Svelte library) to browse through a list of…

vercel/satori

Enlightened library to convert HTML and CSS to SVG

13,961

jeffersoncgo/CoverMaker

Make Covers for Your Library

bradtraversy/design-resources-for-developers

Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI…

66,975

NeuralCoder3/custom_infinite_craft

A custom implementation of Infinite Craft (https://neal.fun/infinite-craft/)

Evirtual/css-3d-lab

Learn 3D effects in CSS/SCSS - live demos, explanations and copy-paste snippets. Pure CSS vs CSS +…

Contributors

128 commits

2 commits

1 commits

1 commits

Languages

CSS

56.2%

Svelte

31.8%

Shell

7.0%

HTML

2.6%

JavaScript

2.4%