NanoMCE HTML Editor Preview

<style>
body {
  padding: 0;
  margin: 0; 
}
#patterns > div {
  width: 50%;
  height: 50%;
  float: left; 
}
#patterns > div:nth-child(1) {
  background-color: white;
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px, 10px 10px;
  background-image: -webkit-linear-gradient(-135deg, white 25%, transparent 25%, transparent 75%, gray 75%, gray), -webkit-linear-gradient(-135deg, gray 25%, transparent 25%, transparent 75%, white 75%, white), -webkit-linear-gradient(135deg, gray 6.25%, transparent 6.25%, transparent 12.5%, gray 12.5%, gray 18.75%, transparent 18.75%, transparent 25%, gray 25%, gray 31.25%, transparent 31.25%, transparent 37.5%, gray 37.5%, gray 43.75%, transparent 43.75%, transparent 56.25%, gray 56.25%, gray 62.5%, transparent 62.5%, transparent 68.75%, gray 68.75%, gray 75%, transparent 75%, transparent 81.25%, gray 81.25%, gray 87.5%, transparent 87.5%, transparent 93.75%, gray 93.75%, gray);
  background-image: -moz-linear-gradient(-135deg, white 25%, transparent 25%, transparent 75%, gray 75%, gray), -moz-linear-gradient(-135deg, gray 25%, transparent 25%, transparent 75%, white 75%, white), -moz-linear-gradient(135deg, gray 6.25%, transparent 6.25%, transparent 12.5%, gray 12.5%, gray 18.75%, transparent 18.75%, transparent 25%, gray 25%, gray 31.25%, transparent 31.25%, transparent 37.5%, gray 37.5%, gray 43.75%, transparent 43.75%, transparent 56.25%, gray 56.25%, gray 62.5%, transparent 62.5%, transparent 68.75%, gray 68.75%, gray 75%, transparent 75%, transparent 81.25%, gray 81.25%, gray 87.5%, transparent 87.5%, transparent 93.75%, gray 93.75%, gray);
  background-image: -ms-linear-gradient(-135deg, white 25%, transparent 25%, transparent 75%, gray 75%, gray), -ms-linear-gradient(-135deg, gray 25%, transparent 25%, transparent 75%, white 75%, white), -ms-linear-gradient(135deg, gray 6.25%, transparent 6.25%, transparent 12.5%, gray 12.5%, gray 18.75%, transparent 18.75%, transparent 25%, gray 25%, gray 31.25%, transparent 31.25%, transparent 37.5%, gray 37.5%, gray 43.75%, transparent 43.75%, transparent 56.25%, gray 56.25%, gray 62.5%, transparent 62.5%, transparent 68.75%, gray 68.75%, gray 75%, transparent 75%, transparent 81.25%, gray 81.25%, gray 87.5%, transparent 87.5%, transparent 93.75%, gray 93.75%, gray);
  background-image: -o-linear-gradient(-135deg, white 25%, transparent 25%, transparent 75%, gray 75%, gray), -o-linear-gradient(-135deg, gray 25%, transparent 25%, transparent 75%, white 75%, white), -o-linear-gradient(135deg, gray 6.25%, transparent 6.25%, transparent 12.5%, gray 12.5%, gray 18.75%, transparent 18.75%, transparent 25%, gray 25%, gray 31.25%, transparent 31.25%, transparent 37.5%, gray 37.5%, gray 43.75%, transparent 43.75%, transparent 56.25%, gray 56.25%, gray 62.5%, transparent 62.5%, transparent 68.75%, gray 68.75%, gray 75%, transparent 75%, transparent 81.25%, gray 81.25%, gray 87.5%, transparent 87.5%, transparent 93.75%, gray 93.75%, gray);
  background-image: linear-gradient(-135deg, white 25%, transparent 25%, transparent 75%, gray 75%, gray), linear-gradient(-135deg, gray 25%, transparent 25%, transparent 75%, white 75%, white), linear-gradient(135deg, gray 6.25%, transparent 6.25%, transparent 12.5%, gray 12.5%, gray 18.75%, transparent 18.75%, transparent 25%, gray 25%, gray 31.25%, transparent 31.25%, transparent 37.5%, gray 37.5%, gray 43.75%, transparent 43.75%, transparent 56.25%, gray 56.25%, gray 62.5%, transparent 62.5%, transparent 68.75%, gray 68.75%, gray 75%, transparent 75%, transparent 81.25%, gray 81.25%, gray 87.5%, transparent 87.5%, transparent 93.75%, gray 93.75%, gray); }

#patterns > div:nth-child(2) {
  background-color: white;
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px, 15px 15px;
  background-image: -webkit-linear-gradient(-135deg, white 25%, transparent 25%, transparent 75%, #1a255b 75%, #1a255b), -webkit-linear-gradient(-135deg, #1a255b 25%, transparent 25%, transparent 75%, white 75%, white), -webkit-linear-gradient(135deg, #1a255b 6.25%, transparent 6.25%, transparent 12.5%, #1a255b 12.5%, #1a255b 18.75%, transparent 18.75%, transparent 25%, #1a255b 25%, #1a255b 31.25%, transparent 31.25%, transparent 37.5%, #1a255b 37.5%, #1a255b 43.75%, transparent 43.75%, transparent 56.25%, #1a255b 56.25%, #1a255b 62.5%, transparent 62.5%, transparent 68.75%, #1a255b 68.75%, #1a255b 75%, transparent 75%, transparent 81.25%, #1a255b 81.25%, #1a255b 87.5%, transparent 87.5%, transparent 93.75%, #1a255b 93.75%, #1a255b);
  background-image: -moz-linear-gradient(-135deg, white 25%, transparent 25%, transparent 75%, #1a255b 75%, #1a255b), -moz-linear-gradient(-135deg, #1a255b 25%, transparent 25%, transparent 75%, white 75%, white), -moz-linear-gradient(135deg, #1a255b 6.25%, transparent 6.25%, transparent 12.5%, #1a255b 12.5%, #1a255b 18.75%, transparent 18.75%, transparent 25%, #1a255b 25%, #1a255b 31.25%, transparent 31.25%, transparent 37.5%, #1a255b 37.5%, #1a255b 43.75%, transparent 43.75%, transparent 56.25%, #1a255b 56.25%, #1a255b 62.5%, transparent 62.5%, transparent 68.75%, #1a255b 68.75%, #1a255b 75%, transparent 75%, transparent 81.25%, #1a255b 81.25%, #1a255b 87.5%, transparent 87.5%, transparent 93.75%, #1a255b 93.75%, #1a255b);
  background-image: -ms-linear-gradient(-135deg, white 25%, transparent 25%, transparent 75%, #1a255b 75%, #1a255b), -ms-linear-gradient(-135deg, #1a255b 25%, transparent 25%, transparent 75%, white 75%, white), -ms-linear-gradient(135deg, #1a255b 6.25%, transparent 6.25%, transparent 12.5%, #1a255b 12.5%, #1a255b 18.75%, transparent 18.75%, transparent 25%, #1a255b 25%, #1a255b 31.25%, transparent 31.25%, transparent 37.5%, #1a255b 37.5%, #1a255b 43.75%, transparent 43.75%, transparent 56.25%, #1a255b 56.25%, #1a255b 62.5%, transparent 62.5%, transparent 68.75%, #1a255b 68.75%, #1a255b 75%, transparent 75%, transparent 81.25%, #1a255b 81.25%, #1a255b 87.5%, transparent 87.5%, transparent 93.75%, #1a255b 93.75%, #1a255b);
  background-image: -o-linear-gradient(-135deg, white 25%, transparent 25%, transparent 75%, #1a255b 75%, #1a255b), -o-linear-gradient(-135deg, #1a255b 25%, transparent 25%, transparent 75%, white 75%, white), -o-linear-gradient(135deg, #1a255b 6.25%, transparent 6.25%, transparent 12.5%, #1a255b 12.5%, #1a255b 18.75%, transparent 18.75%, transparent 25%, #1a255b 25%, #1a255b 31.25%, transparent 31.25%, transparent 37.5%, #1a255b 37.5%, #1a255b 43.75%, transparent 43.75%, transparent 56.25%, #1a255b 56.25%, #1a255b 62.5%, transparent 62.5%, transparent 68.75%, #1a255b 68.75%, #1a255b 75%, transparent 75%, transparent 81.25%, #1a255b 81.25%, #1a255b 87.5%, transparent 87.5%, transparent 93.75%, #1a255b 93.75%, #1a255b);
  background-image: linear-gradient(-135deg, white 25%, transparent 25%, transparent 75%, #1a255b 75%, #1a255b), linear-gradient(-135deg, #1a255b 25%, transparent 25%, transparent 75%, white 75%, white), linear-gradient(135deg, #1a255b 6.25%, transparent 6.25%, transparent 12.5%, #1a255b 12.5%, #1a255b 18.75%, transparent 18.75%, transparent 25%, #1a255b 25%, #1a255b 31.25%, transparent 31.25%, transparent 37.5%, #1a255b 37.5%, #1a255b 43.75%, transparent 43.75%, transparent 56.25%, #1a255b 56.25%, #1a255b 62.5%, transparent 62.5%, transparent 68.75%, #1a255b 68.75%, #1a255b 75%, transparent 75%, transparent 81.25%, #1a255b 81.25%, #1a255b 87.5%, transparent 87.5%, transparent 93.75%, #1a255b 93.75%, #1a255b); }

#patterns > div:nth-child(3) {
  background-color: #c9132a;
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px, 12px 12px;
  background-image: -webkit-linear-gradient(-135deg, #c9132a 25%, transparent 25%, transparent 75%, black 75%, black), -webkit-linear-gradient(-135deg, black 25%, transparent 25%, transparent 75%, #c9132a 75%, #c9132a), -webkit-linear-gradient(135deg, black 6.25%, transparent 6.25%, transparent 12.5%, black 12.5%, black 18.75%, transparent 18.75%, transparent 25%, black 25%, black 31.25%, transparent 31.25%, transparent 37.5%, black 37.5%, black 43.75%, transparent 43.75%, transparent 56.25%, black 56.25%, black 62.5%, transparent 62.5%, transparent 68.75%, black 68.75%, black 75%, transparent 75%, transparent 81.25%, black 81.25%, black 87.5%, transparent 87.5%, transparent 93.75%, black 93.75%, black);
  background-image: -moz-linear-gradient(-135deg, #c9132a 25%, transparent 25%, transparent 75%, black 75%, black), -moz-linear-gradient(-135deg, black 25%, transparent 25%, transparent 75%, #c9132a 75%, #c9132a), -moz-linear-gradient(135deg, black 6.25%, transparent 6.25%, transparent 12.5%, black 12.5%, black 18.75%, transparent 18.75%, transparent 25%, black 25%, black 31.25%, transparent 31.25%, transparent 37.5%, black 37.5%, black 43.75%, transparent 43.75%, transparent 56.25%, black 56.25%, black 62.5%, transparent 62.5%, transparent 68.75%, black 68.75%, black 75%, transparent 75%, transparent 81.25%, black 81.25%, black 87.5%, transparent 87.5%, transparent 93.75%, black 93.75%, black);
  background-image: -ms-linear-gradient(-135deg, #c9132a 25%, transparent 25%, transparent 75%, black 75%, black), -ms-linear-gradient(-135deg, black 25%, transparent 25%, transparent 75%, #c9132a 75%, #c9132a), -ms-linear-gradient(135deg, black 6.25%, transparent 6.25%, transparent 12.5%, black 12.5%, black 18.75%, transparent 18.75%, transparent 25%, black 25%, black 31.25%, transparent 31.25%, transparent 37.5%, black 37.5%, black 43.75%, transparent 43.75%, transparent 56.25%, black 56.25%, black 62.5%, transparent 62.5%, transparent 68.75%, black 68.75%, black 75%, transparent 75%, transparent 81.25%, black 81.25%, black 87.5%, transparent 87.5%, transparent 93.75%, black 93.75%, black);
  background-image: -o-linear-gradient(-135deg, #c9132a 25%, transparent 25%, transparent 75%, black 75%, black), -o-linear-gradient(-135deg, black 25%, transparent 25%, transparent 75%, #c9132a 75%, #c9132a), -o-linear-gradient(135deg, black 6.25%, transparent 6.25%, transparent 12.5%, black 12.5%, black 18.75%, transparent 18.75%, transparent 25%, black 25%, black 31.25%, transparent 31.25%, transparent 37.5%, black 37.5%, black 43.75%, transparent 43.75%, transparent 56.25%, black 56.25%, black 62.5%, transparent 62.5%, transparent 68.75%, black 68.75%, black 75%, transparent 75%, transparent 81.25%, black 81.25%, black 87.5%, transparent 87.5%, transparent 93.75%, black 93.75%, black);
  background-image: linear-gradient(-135deg, #c9132a 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(-135deg, black 25%, transparent 25%, transparent 75%, #c9132a 75%, #c9132a), linear-gradient(135deg, black 6.25%, transparent 6.25%, transparent 12.5%, black 12.5%, black 18.75%, transparent 18.75%, transparent 25%, black 25%, black 31.25%, transparent 31.25%, transparent 37.5%, black 37.5%, black 43.75%, transparent 43.75%, transparent 56.25%, black 56.25%, black 62.5%, transparent 62.5%, transparent 68.75%, black 68.75%, black 75%, transparent 75%, transparent 81.25%, black 81.25%, black 87.5%, transparent 87.5%, transparent 93.75%, black 93.75%, black); }

#patterns > div:nth-child(4) {
  background-color: #136846;
  background-size: 50px 50px;
  background-position: 0 0, 25px 25px, 25px 25px;
  background-image: -webkit-linear-gradient(-135deg, #136846 25%, transparent 25%, transparent 75%, #243a37 75%, #243a37), -webkit-linear-gradient(-135deg, #243a37 25%, transparent 25%, transparent 75%, #136846 75%, #136846), -webkit-linear-gradient(135deg, #243a37 6.25%, transparent 6.25%, transparent 12.5%, #243a37 12.5%, #243a37 18.75%, transparent 18.75%, transparent 25%, #243a37 25%, #243a37 31.25%, transparent 31.25%, transparent 37.5%, #243a37 37.5%, #243a37 43.75%, transparent 43.75%, transparent 56.25%, #243a37 56.25%, #243a37 62.5%, transparent 62.5%, transparent 68.75%, #243a37 68.75%, #243a37 75%, transparent 75%, transparent 81.25%, #243a37 81.25%, #243a37 87.5%, transparent 87.5%, transparent 93.75%, #243a37 93.75%, #243a37);
  background-image: -moz-linear-gradient(-135deg, #136846 25%, transparent 25%, transparent 75%, #243a37 75%, #243a37), -moz-linear-gradient(-135deg, #243a37 25%, transparent 25%, transparent 75%, #136846 75%, #136846), -moz-linear-gradient(135deg, #243a37 6.25%, transparent 6.25%, transparent 12.5%, #243a37 12.5%, #243a37 18.75%, transparent 18.75%, transparent 25%, #243a37 25%, #243a37 31.25%, transparent 31.25%, transparent 37.5%, #243a37 37.5%, #243a37 43.75%, transparent 43.75%, transparent 56.25%, #243a37 56.25%, #243a37 62.5%, transparent 62.5%, transparent 68.75%, #243a37 68.75%, #243a37 75%, transparent 75%, transparent 81.25%, #243a37 81.25%, #243a37 87.5%, transparent 87.5%, transparent 93.75%, #243a37 93.75%, #243a37);
  background-image: -ms-linear-gradient(-135deg, #136846 25%, transparent 25%, transparent 75%, #243a37 75%, #243a37), -ms-linear-gradient(-135deg, #243a37 25%, transparent 25%, transparent 75%, #136846 75%, #136846), -ms-linear-gradient(135deg, #243a37 6.25%, transparent 6.25%, transparent 12.5%, #243a37 12.5%, #243a37 18.75%, transparent 18.75%, transparent 25%, #243a37 25%, #243a37 31.25%, transparent 31.25%, transparent 37.5%, #243a37 37.5%, #243a37 43.75%, transparent 43.75%, transparent 56.25%, #243a37 56.25%, #243a37 62.5%, transparent 62.5%, transparent 68.75%, #243a37 68.75%, #243a37 75%, transparent 75%, transparent 81.25%, #243a37 81.25%, #243a37 87.5%, transparent 87.5%, transparent 93.75%, #243a37 93.75%, #243a37);
  background-image: -o-linear-gradient(-135deg, #136846 25%, transparent 25%, transparent 75%, #243a37 75%, #243a37), -o-linear-gradient(-135deg, #243a37 25%, transparent 25%, transparent 75%, #136846 75%, #136846), -o-linear-gradient(135deg, #243a37 6.25%, transparent 6.25%, transparent 12.5%, #243a37 12.5%, #243a37 18.75%, transparent 18.75%, transparent 25%, #243a37 25%, #243a37 31.25%, transparent 31.25%, transparent 37.5%, #243a37 37.5%, #243a37 43.75%, transparent 43.75%, transparent 56.25%, #243a37 56.25%, #243a37 62.5%, transparent 62.5%, transparent 68.75%, #243a37 68.75%, #243a37 75%, transparent 75%, transparent 81.25%, #243a37 81.25%, #243a37 87.5%, transparent 87.5%, transparent 93.75%, #243a37 93.75%, #243a37);
  background-image: linear-gradient(-135deg, #136846 25%, transparent 25%, transparent 75%, #243a37 75%, #243a37), linear-gradient(-135deg, #243a37 25%, transparent 25%, transparent 75%, #136846 75%, #136846), linear-gradient(135deg, #243a37 6.25%, transparent 6.25%, transparent 12.5%, #243a37 12.5%, #243a37 18.75%, transparent 18.75%, transparent 25%, #243a37 25%, #243a37 31.25%, transparent 31.25%, transparent 37.5%, #243a37 37.5%, #243a37 43.75%, transparent 43.75%, transparent 56.25%, #243a37 56.25%, #243a37 62.5%, transparent 62.5%, transparent 68.75%, #243a37 68.75%, #243a37 75%, transparent 75%, transparent 81.25%, #243a37 81.25%, #243a37 87.5%, transparent 87.5%, transparent 93.75%, #243a37 93.75%, #243a37); }
</style>

<div id='patterns'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

NanoMCE Editor :: Transform Browsers into Notepad++