pie chart

Accurate Card Styles (for anyone to use!)



Commander (1)

Instant (29)

Enchantment (28)

Artifact (19)

I've been wanting to implement my own custom CSS for decks for a long time, and when I noticed that card links on Tappedout have meta-data that describes their supertypes, colors and costs I decided to make them look like they do on actual cards.

This deck is a testing grounds for covering all kinds of possible card meta-data combinations, and thus also a way for me to show you what it does.


It should:

  • Color all cards correctly (not tokens though, they don't have color meta-data on tappedout)
  • Add distinguishable styles to Masterpieces (Expeditions, Inventions & Invocations)
  • Display quantity in style with the cards
  • Replace flip with transform icon to all cards that transform, the icon transforms on hover
  • Replace foil icon with animated foil on the cards name and hover overlay
  • Replace alter icon with an icon that "activates" on hover
  • Replace flag icons with much nicer and round versions

All parts of this except the animated foil are vector graphics.

Plans, bugs, help and testing

See GitHub project issues for plans and bugs, you might even be able to help!

You can try testing some things yourself by commenting card links! The css works in comments as well!

Use it yourself

Paste it into your decks description and you'll get the latest updates automatically. If it doesn't do anything, make sure that each code row is surrounded by empty rows. If it still doesn't do anything, you need to ask scotchtapedsleeves or yeago for coding permission.

This button copies a script! Only use it in your deck if you don't want the styles in your decks description, for example when you have alternate names for cards because it doesn't work well with them: It's funny because it's a foil Foil .


AbyssusDraconem for work on Invocations and preloading flip icons

Sources and links

Transform icons

Flag icons


GitHub project





88% Competitive