pie chart

css testing grounds

Commander / EDH*


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 the cards correctly (not tokens though, they don't have color meta-data on tappedout)
  • Apply transform icons to all cards that transform (hover the icon to see transformed icon!)
  • Replace the foil icon with animated foil on the cards name and hover overlay
  • Display quantity in style with the cards

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.

Sources and links



GitHub project




Compare to inventory
Top Ranked
  • Achieved #22 position overall 2 months ago
Date added 3 months
Last updated 1 week

This deck is not Commander / EDH legal.

Highlight illegal cards
Cards 298
Avg. CMC 3.93
Tokens None Vivien, 1/1 Spirit, 1/1 Assassin, 3/3 Golem, None Vraska, Experience, None Copy Clone, 0/1 Kobold, 1/1 Elemental, Dack, 1/1 Soldier, 6/6 Dragon, 1/1 Human Cleric, 2/2 Cat Warrior, 2/2 Cat, Monarch, 1/1 Thopter, Ajani, Tamiyo, 1/1 Goblin, 2/2 Wolf, Arlinn, 2/2 Zombie, 2/2 Vampire, Teferi, 4/4 Elemental, Chandra
Folders Coooooooool, Code help
Ignored suggestions
Shared with