Deck Generator

Gatherer

Visual List Options

Visual List
Numbers centered?
Color #: (I set it to white, can't be changed)
check Visual List box to create a visual decklist, check numbers centered to center numbers on the visual decklist

Text List Options

Select deck colors:
White:
Green:
Blue:
Red:
Black:
(Default is "Brown")

Card Image to show:
(commented, ie. doesn't do anything)

Other Options

Deck Name:
Description:

Put your list here:

HTML to copy:

Preview appears here

Instructions

1. Copy everything from "CSS to copy:" and paste it somewhere on the page.
2. Copy code for the decklist found in "HTML to copy" text area and paste it where you want.

If you wish to generate more decklists you should refresh (press F5) the page before generating code for another decklist.

Split cards have to be entered in this format [Name] // [Name2]. Example: Commit // Memory.

When using MTGOTraders version please always add Sideboard. if not present add an empty line, break and space on the next line (press Enter, Enter, Spacebar) to show the "Sideboard:".

Home

Gatherer

MTGOTraders

MTGOTraders with download links

Draft Parser

Hover generator

CSS to copy:

}
.thumb:hover {
border:0;
z-index:5;
}
.thumb span {
position:absolute;
visibility:hidden;
}
.thumb:hover span {
visibility:visible;
width: 223px;
height: 311px;
top:37px;
left:37px;
   z-index: 5;
}
.override {margin: 0px;}
.imgSize2 {height: 140px;}
/*h3 {color: #cc0000; font-weight: bold; border-bottom: 1px solid black; display: block; width: 100%; font-size: 22px;}
h3.pure {font-size: 16px; color: #5d969f;}*/ 
td.modo2 {border: 1px solid #ccc; padding: 7px; color: #fff; background-color: #313131;}
td.modo {border: 1px solid #ccc; padding: 7px;}
table.modo {border: 1px solid #ccc; width: 95%; margin: auto;} 
table {font-family: "Arial"; line-height: 20px;}
 .clear {clear:both;}
 .deckformat {font-family:"Arial";font-size: 20px;width:100%; text-align: left;}
 .dName { color: #000; width:100%;font-size: 25px;font-family:"Arial"; text-align: left;}  
  
 .deckname1 {left: 5px; position: absolute; top: 3px; text-align: left; font-size: 25px;font-family:"Arial"; font-weight: bold; }  
 .deckdescription {left: 5px; position: relative; top: 35px; font-family: "Arial"; text-align: left; font-size: 20px; /*text-shadow:
       1px 1px 0 #FFF,
     -1px -1px 0 #ccc,  
      1px -1px 0 #ccc,
      -1px 1px 0 #ccc,
       1px 1px 0 #ccc;
         */}
 .listImg {width:100px;z-index:-1; height:137px;}
 .listImgDiv {width:100px;padding:0px;padding-left:2px; padding-right:1px; position:relative;float:left;}
 .imgNumSpan {font-size: 24px;position:absolute; bottom:8px; right:8px;z-index:2; color: #FFF; background-color: rgba(0, 0, 0, .5); padding: 0 10px 0 10px; border-radius: 5px; border: 1px solid #bcbcbc; font-weight: bold; font-family: "Arial";} 
 .imgNumSpanCentered{font-size: 24px;position:absolute; bottom:8px; top:70%; left:30%;z-index:2; color: #FFF; background-color: rgba(0, 0, 0, .5); padding: 0 10px 0 10px; border-radius: 5px; border: 1px solid #bcbcbc; font-weight: bold; font-family: "Arial";}
 
 .logo {background-color: rgba(255, 255, 255, .5); padding: 5px; text-align: right;  
 -webkit-column-span: all; /* Chrome, Safari, Opera */
  column-span: all;}

.sb {background-color: rgba(160, 160, 160, .8); padding: 5px; position: relative; top: -5px;}
 .mtgodeck {margin: auto;}
 
 .deckListing {position:static;}
 .roundBorder {border:2px solid; border-radius:1px; margin-left: 5px; margin:auto;}
 .gradientBarBrown {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background-color: rgba(120, 60, 30, .5);}
 .gradientBarR {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background-color: rgba(255, 0, 0, .5);}
 .gradientBarG {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background-color: rgba(0, 255, 0, .5);}
 .gradientBarU {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background-color: rgba(0, 55, 200, .5);}
 .gradientBarW {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background-color: rgba(255, 255, 255, 1);}
 .gradientBarB {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background-color: rgba(0, 0, 0, .75);color: #FFF;}
 
 .gradientBarWGURB {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, white, green, blue, red, black);  background: -o-linear-gradient(right,white, green,blue, red, black);background: -moz-linear-gradient(right,white, green, blue, red, black); background: linear-gradient(to right,rgba(255,255,255,.5), rgba(0,255,0,.5), rgba(0,55,200,.5), rgba(255,0,0,.5), rgba(0,0,0,.5));}
 
 .gradientBarWURB {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, white, blue, red, black);  background: -o-linear-gradient(right,white, blue, red, black);background: -moz-linear-gradient(right,white, blue, red, black); background: linear-gradient(to right,rgba(255,255,255,.5), rgba(0,0,255,.5), rgba(255,0,0,.5), rgba(0,0,0,.5));}
 .gradientBarUGRB {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, blue, green, red, black);  background: -o-linear-gradient(right, blue, green, red, black);background: -moz-linear-gradient(right, blue, green, red, black); background: linear-gradient(to right, rgba(0,0,255,.5), rgba(0,255,0,.5), rgba(255,0,0,.5), rgba(0,0,0,.5));}
 .gradientBarWGRB {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, white, green, red, black);  background: -o-linear-gradient(right,white, green, red, black);background: -moz-linear-gradient(right,white, green, red, black); background: linear-gradient(to right,rgba(255,255,255,.5), rgba(0,255,0,.5), rgba(255,0,0,.5), rgba(0,0,0,.5));}
 .gradientBarWGUR {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, white, green, blue, red);  background: -o-linear-gradient(right,white, green, blue, red);background: -moz-linear-gradient(right,white, green, blue, red); background: linear-gradient(to right,rgba(255,255,255,.5), rgba(0,255,0,.5), rgba(0,55,200,.5), rgba(255,0,0,.5));}
 .gradientBarWGUB {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, white, green, blue, black);  background: -o-linear-gradient(right,white, green, blue, black);background: -moz-linear-gradient(right,white, green, blue, black); background: linear-gradient(to right,rgba(255,255,255,.5), rgba(0,255,0,.5), rgba(0,55,200,.5), rgba(0,0,0,.5));}
 
 .gradientBarWGU {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, white, green,blue);  background: -o-linear-gradient(right,white, green, blue);background: -moz-linear-gradient(right,white, green, blue); background: linear-gradient(to right,rgba(255,255,255,.5), rgba(0,255,0,.5), rgba(0,55,200,.5));}
 .gradientBarWGB {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, white, green,black);  background: -o-linear-gradient(right,white, green, black);background: -moz-linear-gradient(right,white, green, black); background: linear-gradient(to right,rgba(255,255,255,.5), rgba(0,255,0,.5), rgba(0,0,0,.5));}
 .gradientBarUGR {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, blue, green, red);  background: -o-linear-gradient(right, blue, green, red);background: -moz-linear-gradient(right, blue, green, red); background: linear-gradient(to right, rgba(0,0,255,.5), rgba(0,255,0,.5), rgba(255,0,0,.5));}
 .gradientBarWRB {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, white, red, black);  background: -o-linear-gradient(right,white, red, black);background: -moz-linear-gradient(right,white,  red, black); background: linear-gradient(to right,rgba(255,255,255,.5), rgba(255,0,0,.5), rgba(0,0,0,.5));}
 .gradientBarWGR {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, white, green, red);  background: -o-linear-gradient(right,white,green, red);background: -moz-linear-gradient(right,white, green, red); background: linear-gradient(to right,rgba(255,255,255,.5),  rgba(0,255,0,.5), rgba(255,0,0,.5));}
 .gradientBarWUB {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left,white, #0055FF,  black);  background: -o-linear-gradient(right,white,#0055FF, black);background: -moz-linear-gradient(right,white,#0055BB,  black); background: linear-gradient(to right,white,#0055BB,black);}
 .gradientBarWUR {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, blue, red);  background: -o-linear-gradient(right,white, blue, red);background: -moz-linear-gradient(right, white,blue, red); background: linear-gradient(to right,rgba(255,255,255,.5), rgba(0,0,255,.5),  rgba(255,0,0,.5));}
 .gradientBarURB {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, blue, red, black);  background: -o-linear-gradient(right, blue, red, black);background: -moz-linear-gradient(right, blue, red, black); background: linear-gradient(to right, rgba(0,55,200,.5),  rgba(255,0,0,.5),rgba(0,0,0,.5));}
 .gradientBarGUB {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, green, blue, black);  background: -o-linear-gradient(right, green,blue, black);background: -moz-linear-gradient(right, green, blue, black); background: linear-gradient(to right, rgba(0,255,0,.5),rgba(0,55,200,.5),  rgba(0,0,0,.5));}
 .gradientBarGRB {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, green, red, black);  background: -o-linear-gradient(right, green,red, black);background: -moz-linear-gradient(right, green, red, black); background: linear-gradient(to right, rgba(0,255,0,.5),rgba(255,0,0,.5),  rgba(0,0,0,.5));}

.gradientBarWU {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, white, blue);  background: -o-linear-gradient(right,white, blue);background: -moz-linear-gradient(right,white,  blue); background: linear-gradient(to right,rgba(255,255,255,.5), rgba(0,55,200,.5));}
 .gradientBarGU {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, green, , black);  background: -o-linear-gradient(right, green, blue);background: -moz-linear-gradient(right, green, blue); background: linear-gradient(to right,rgba(0,255,0,.5), rgba(0,55,200,.5));}
 .gradientBarWB {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, white,  black);  background: -o-linear-gradient(right,white, black);background: -moz-linear-gradient(right,white,  black); background: linear-gradient(to right,white,black);}
 .gradientBarUR {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, blue, red);  background: -o-linear-gradient(right, blue, red);background: -moz-linear-gradient(right, blue, red); background: linear-gradient(to right, rgba(0,0,255,.5),  rgba(255,0,0,.5));}
 .gradientBarUB {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, #0055FF,  black);  background: -o-linear-gradient(right,#0055FF, black);background: -moz-linear-gradient(right,#0055BB,  black); background: linear-gradient(to right,#0055BB,black);}
 .gradientBarWR {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, white, red);  background: -o-linear-gradient(right,white, red);background: -moz-linear-gradient(right,white,  red); background: linear-gradient(to right,rgba(255,255,255,.5), rgba(255,0,0,.5));}
 .gradientBarWG {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, white, green);  background: -o-linear-gradient(right,white, green);background: -moz-linear-gradient(right,white,  green); background: linear-gradient(to right,rgba(255,255,255,.5), rgba(0,255,0,.5));}
 .gradientBarGB {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, green, , black);  background: -o-linear-gradient(right, green, black);background: -moz-linear-gradient(right, green, black); background: linear-gradient(to right,rgba(0,255,0,.5), rgba(0,0,0,.5));}
 .gradientBarGR {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left,  green, red);  background: -o-linear-gradient(right,green, red);background: -moz-linear-gradient(right, green, red); background: linear-gradient(to right, rgba(0,255,0,.5), rgba(255,0,0,.5));}
 .gradientBarRB {border:0px;border-top:2px;border-top-left-radius:1px;border-top-right-radius:1px;width:600px;height:40px;background: -webkit-linear-gradient(left, red, black);  background: -o-linear-gradient(right, red, black);background: -moz-linear-gradient(right,red, black); background: linear-gradient(to right,rgba(255,0,0,.5), rgba(0,0,0,.5));}
              </style>

Written by Paul Emerson Leicht and S'Tsung. This site is not affiliated with Wizards of the Coast.