css backgrounds

Hover over a background to preview it across the whole page. All css backgrounds can have their colors changed to whatever you like. The code is a CSS class that you can add to your css file and then use the class in any element you want.

diagonal stripes

background-color: #080808;
background-image: repeating-linear-gradient(
  135deg,
  #080808 0,
  #080808 12px,
  #151515 12px,
  #151515 24px
);

horizontal stripes

.horizontal-stripes {
background-color: #080808;
background-image: repeating-linear-gradient(
to bottom,
#080808 0,
#080808 12px,
#151515 12px,
#151515 24px
);
}

vertical stripes

.vertical-stripes {
  background-color: #080808;
  background-image: repeating-linear-gradient(
    to right,
    #080808 0,
    #080808 12px,
    #151515 12px,
    #151515 24px
  );
}

checkerboard

.checkerboard {
  background-color: #080808;
  background-image:
    linear-gradient(45deg, #181818 25%, transparent 25%),
    linear-gradient(-45deg, #181818 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #181818 75%),
    linear-gradient(-45deg, transparent 75%, #181818 75%);
  background-size: 24px 24px;
  background-position:
    0 0,
    0 12px,
    12px -12px,
    -12px 0;
}

dots

.dots {
  background-color: #080808;
  background-image: radial-gradient(
    circle,
    #b00000 2px,
    transparent 2px
  );
  background-size: 20px 20px;
}

swirls

.swirls {
  background-color: #080808;
  background-image: repeating-conic-gradient(
    from 0deg,
    #080808 0deg 15deg,
    #300000 15deg 30deg
  );
  background-size: 60px 60px;
}

plaid

.plaid {
  background-color: #080808;
  background-image:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 22px,
      rgba(176, 0, 0, 0.45) 22px,
      rgba(176, 0, 0, 0.45) 28px,
      transparent 28px,
      transparent 34px,
      rgba(255, 255, 255, 0.08) 34px,
      rgba(255, 255, 255, 0.08) 36px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 22px,
      rgba(176, 0, 0, 0.45) 22px,
      rgba(176, 0, 0, 0.45) 28px,
      transparent 28px,
      transparent 34px,
      rgba(255, 255, 255, 0.08) 34px,
      rgba(255, 255, 255, 0.08) 36px
    );
  background-size: 36px 36px;
}

grid

.brick-wall {
  background-color: #1a1a1a;
  background-image:
    linear-gradient(
      #5f111b 2px,
      transparent 2px
    ),
    linear-gradient(
      90deg,
      #5f111b 2px,
      transparent 2px
    ),
    linear-gradient(
      90deg,
      #5f111b 2px,
      transparent 2px
    );
  background-size:
    64px 32px,
    64px 32px,
    64px 32px;
  background-position:
    0 0,
    0 0,
    32px 16px;
  background-repeat: repeat;
}

zigzags

.zigzags {
  background-color: #242424;
  background-image:
    linear-gradient(
      135deg,
      #5c0b16 25%,
      transparent 25%
    ),
    linear-gradient(
      225deg,
      #5c0b16 25%,
      transparent 25%
    ),
    linear-gradient(
      45deg,
      #5c0b16 25%,
      transparent 25%
    ),
    linear-gradient(
      315deg,
      #5c0b16 25%,
      #242424 25%
    );
  background-position:
    20px 0,
    20px 0,
    0 0,
    0 0;
  background-size: 40px 40px;
  background-repeat: repeat;
}