/ Background Patterns

Diamonds Background Pattern

Diamonds Background Pattern

Diamonds Pattern

A css Diamonds Background Pattern.

Made with

Html
Css

Author

yoksel

Css

$bgcolor: #FFFF9D;
$transparent: rgba(255, 255, 255, 0);

$color-1: transparentize(#FFFF9D, .2);
$color-1-1: transparentize(#FFFF9D, .5);
$color-2: transparentize(#79BD8F, .2);
$color-2-1: transparentize(#79BD8F, .5);
$color-3: transparentize(#BEEB9F, .2);
$color-3-1: transparentize(#BEEB9F, .5);
$color-4: transparentize(#FF6138, .2);
$color-4-1: transparentize(#FF6138, .4);

$size: 2em;
$big-size: $size*2;

HTML {
  height: 100%;
  }
BODY {
  background: 
    linear-gradient(to right top,
      $color-4-1 15%,
      $transparent 15%
      ) $big-size/2 $big-size,
    linear-gradient(to left top,
      $color-4 15%,
      $transparent 15%
      ) $big-size/2 $big-size,
    linear-gradient(to left bottom,
      $color-4-1 15%,
      $transparent 15%
      ) $big-size/2 $big-size,
    linear-gradient(to right bottom,
      $color-4 15%,
      $transparent 15%
      ) $big-size/2 $big-size,
    linear-gradient(to right top,
      $color-2-1 15%,
      $transparent 15%
      ) 0 0,
    linear-gradient(to left top,
      $color-2 15%,
      $transparent 15%
      ) 0 0,
    linear-gradient(to right bottom,
      $color-2 15%,
      $transparent 15%
      ) 0 0,
    linear-gradient(to left bottom,
      $color-2-1 15%,
      $transparent 15%
      ) 0 0,
    
    linear-gradient(to right top,
      $color-3 25%,
      $transparent 25%
      ) 0 0,
    linear-gradient(to left top,
      $color-3-1 25%,
      $transparent 25%
      ) 0 0,
    linear-gradient(to right bottom,
      $color-3-1 25%,
      $transparent 25%
      ) 0 0,
    linear-gradient(to left bottom,
      $color-3 25%,
      $transparent 25%
      ) 0 0;
  background-size:  $big-size $big-size*2;
  background-color: $bgcolor;
  font: 10px/2 'Trebuchet MS', Verdana, sans-serif;
  }

Demo

See the Pen Diamonds by yoksel (@yoksel) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More