--- title: Pokémon Cards CSS Holographic Effect | daily.dev description: A comprehensive showcase of advanced CSS techniques for creating realistic holographic effects on Pokémon trading cards. The project demonstrates various card... canonical: https://daily.dev/posts/nc0wulprf twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Pokémon Cards CSS Holographic Effect | daily.dev og:description: A comprehensive showcase of advanced CSS techniques for creating realistic holographic effects on Pokémon trading cards. The project demonstrates various card... og:url: https://daily.dev/posts/nc0wulprf og:image: https://api.daily.dev/og/posts/Nc0WULprF.png og:image:alt: Post cover image og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Pokémon Cards CSS Holographic Effect **[Dev World](https://daily.dev/sources/dev_world)** · [@hadilbenabdallah](https://daily.dev/hadilbenabdallah) · 576 upvotes · 87 comments ## Summary A comprehensive showcase of advanced CSS techniques for creating realistic holographic effects on Pokémon trading cards. The project demonstrates various card types including common, rare, V cards, and secret rares, each with unique visual effects achieved through 3D transforms, CSS gradients, blend modes, filters, and interactive animations. Uses SvelteJS for state management and CSS custom properties to drive dynamic effects based on cursor position. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@tommycarter** · 4 upvotes > Looks amazing! Would be super interesting to see this on other TCG sets! **@corentincordonnier** · 2 upvotes > that's amazing, So beautifull **@simon125q** · 2 upvotes > That's quite impresive **@buckerooo** · 2 upvotes > this is so cool. The reflection is amazing. I have to try this. I think if you reduce the rotations just a little bit could maybe be could look and feel a bit more tight and not over doing it. Just my opinion but love the effects and everything. **@fabooy961** · 2 upvotes > Holy Moly!!! This is fakken awesome <3 > >  ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#frontend](https://daily.dev/tags/frontend), [#svelte](https://daily.dev/tags/svelte) [View this post on daily.dev](https://daily.dev/posts/nc0wulprf) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/nc0wulprf","headline":"Pokémon Cards CSS Holographic Effect","text":"Shared: Pokémon Cards CSS Holographic Effect","url":"https://daily.dev/posts/nc0wulprf","datePublished":"2025-09-15T07:16:11.176Z","dateModified":"2025-09-15T07:16:11.182Z","author":{"@type":"Person","name":"Hadil Ben Abdallah","url":"https://daily.dev/hadilbenabdallah","image":"https://media.daily.dev/image/upload/s--npVXQBAk--/f_auto/v1726134205/avatars/avatar_9pqnrpoJdg1CfgqIBuMCl","description":"An Amazing Software Engineer & Technical Writer","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":31310}},"image":"https://media.daily.dev/image/upload/s--58gMhC4P--/f_auto/v1722860399/public/Placeholder%2012","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":576},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":87}],"sharedContent":{"@type":"WebPage","url":"https://api.daily.dev/r/4Qe2OUWvG"},"comment":[{"@type":"Comment","text":"Looks amazing! Would be super interesting to see this on other TCG sets!","datePublished":"2025-09-15T08:16:49.418Z","url":"https://daily.dev/posts/Nc0WULprF#c-qpYKWqDAI","author":{"@type":"Person","name":"Tommy Carter","url":"https://daily.dev/tommycarter","image":"https://lh3.googleusercontent.com/a/ACg8ocLJ3qvP8UUXCc2EkfmdkTgjo3FVhXW5w5OLev31v4RaiZuIKA=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"that’s amazing, So beautifull","datePublished":"2025-09-15T09:01:42.906Z","url":"https://daily.dev/posts/Nc0WULprF#c-PFmfL5iaa","author":{"@type":"Person","name":"Corentin CORDONNIER","url":"https://daily.dev/corentincordonnier","image":"https://lh3.googleusercontent.com/a/ACg8ocLZ3U2Cnr4x052XvJxuh7WVIqclN_DZN9agQKpHszGWUxercg=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"That’s quite impresive","datePublished":"2025-09-15T17:08:14.495Z","url":"https://daily.dev/posts/Nc0WULprF#c-wijIqbJbr","author":{"@type":"Person","name":"Szymon Omieciński","url":"https://daily.dev/simon125q","image":"https://media.daily.dev/image/upload/s--ZNKkeUvQ--/f_auto/v1762695887/avatars/avatar_g4ZJecDKXrCh6bYVK1iyV?_a=BAMAK+ZW0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"this is so cool. The reflection is amazing. I have to try this. I think if you reduce the rotations just a little bit could maybe be could look and feel a bit more tight and not over doing it. Just my opinion but love the effects and everything.","datePublished":"2025-09-15T19:21:21.567Z","url":"https://daily.dev/posts/Nc0WULprF#c-5Qb1FEgHg","author":{"@type":"Person","name":"buckerooo","url":"https://daily.dev/buckerooo","image":"https://media.daily.dev/image/upload/s--O0TOmw4y--/f_auto/v1715772965/public/noProfile"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Holy Moly!!! This is fakken awesome <3","datePublished":"2025-09-19T08:26:27.653Z","url":"https://daily.dev/posts/Nc0WULprF#c-qNeZ6ROTj","author":{"@type":"Person","name":"Le Fä De Le Lö","url":"https://daily.dev/fabooy961","image":"https://media.daily.dev/image/upload/v1677218265/avatars/avatar_H6lLM2y9S4Yf8VCWicpd8.jpg"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/dev_world","name":"Dev World"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Dev World","item":"https://daily.dev/squads/dev_world"},{"@type":"ListItem","position":3,"name":"Pokémon Cards CSS Holographic Effect"}]} ```