/ Background Patterns

Squares Background Pattern

Squares Background Pattern

Squares Pattern

A CSS Squares Background Pattern.

Made with

Html
Css/SCSS

Author

yoksel

Css

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

$color-1: #36B1BF;
$color-2: #4AD9D9;
$color-3: #E9F1DF;
$color-4: #F5A503;
$color-5: #F2385A;

$size: 3em;
$big-size: $size*2;
$min: 0;
$max: $size*.11;

$diff: $max - $min;

HTML {
  height: 100%;
  }
BODY {
  background: 
    linear-gradient(to right,
      $transparent $min,
      $color-1 $min, $color-1 $max, 
      $transparent $max
      ) 0 0,
    linear-gradient(to top,
      $transparent $min,
      $color-1 $min, $color-1 $max, 
      $transparent $max
      ) 0 0,
    
    linear-gradient(to left,
      $transparent $min,
      $color-2 $min, $color-2 $max, 
      $transparent $max
      ) 0 0,
    linear-gradient(to right,
      $transparent $min,
      $color-2 $min, $color-2 $max*2, 
      $transparent $max*2
      ) 0 0,
    linear-gradient(to bottom,
      $transparent $min,
      $color-2 $min, $color-2 $max, 
      $transparent $max
      ) 0 0,
    linear-gradient(to top,
      $transparent $min,
      $color-2 $min, $color-2 $max*2, 
      $transparent $max*2
      ) 0 0,
    
    linear-gradient(to left,
      $transparent $min,
      $color-3 $min, $color-3 $max*2, 
      $transparent $max*2
      ) 0 0,
    linear-gradient(to right,
      $transparent $min,
      $color-3 $min, $color-3 $max*3, 
      $transparent $max*3
      ) 0 0,
    linear-gradient(to bottom,
      $transparent $min,
      $color-3 $min, $color-3 $max*2, 
      $transparent $max*2
      ) 0 0,
    linear-gradient(to top,
      $transparent $min,
      $color-3 $min, $color-3 $max*3, 
      $transparent $max*3
      ) 0 0,
    
    linear-gradient(to left,
      $transparent $min,
      $color-4 $min, $color-4 $max*3, 
      $transparent $max*3
      ) 0 0,
    linear-gradient(to right,
      $transparent $min,
      $color-4 $min, $color-4 $max*4, 
      $transparent $max*4
      ) 0 0,
    linear-gradient(to bottom,
      $transparent $min,
      $color-4 $min, $color-4 $max*3, 
      $transparent $max*3
      ) 0 0,
    linear-gradient(to top,
      $transparent $min,
      $color-4 $min, $color-4 $max*4, 
      $transparent $max*4
      ) 0 0,
    
    linear-gradient(to left,
      $transparent $min,
      $color-5 $min, $color-5 $max*4, 
      $transparent $max*4
      ) 0 0,
    linear-gradient(to right,
      $transparent $min,
      $color-5 $min, $color-5 $max*5, 
      $transparent $max*5
      ) 0 0,
    linear-gradient(to bottom,
      $transparent $min,
      $color-5 $min, $color-5 $max*4, 
      $transparent $max*4
      ) 0 0,
    linear-gradient(to top,
      $transparent $min,
      $color-5 $min, $color-5 $max*5, 
      $transparent $max*5
      ) 0 0,
    
    linear-gradient(to left,
      $transparent $min,
      $color-1 $min, $color-1 $max*5, 
      $transparent $max*5
      ) 0 0,
    linear-gradient(to right,
      $transparent $min,
      $color-1 $min, $color-1 $max*6, 
      $transparent $max*6
      ) 0 0,
    linear-gradient(to bottom,
      $transparent $min,
      $color-1 $min, $color-1 $max*5, 
      $transparent $max*5
      ) 0 0,
    linear-gradient(to top,
      $transparent $min,
      $color-1 $min, $color-1 $max*6, 
      $transparent $max*6
      ) 0 0,
    
    linear-gradient(to left,
      $transparent $min,
      $color-2 $min, $color-2 $max*6, 
      $transparent $max*6
      ) 0 0,
    linear-gradient(to right,
      $transparent $min,
      $color-2 $min, $color-2 $max*7, 
      $transparent $max*7
      ) 0 0,
    linear-gradient(to bottom,
      $transparent $min,
      $color-2 $min, $color-2 $max*6, 
      $transparent $max*6
      ) 0 0,
    linear-gradient(to top,
      $transparent $min,
      $color-2 $min, $color-2 $max*7, 
      $transparent $max*7
      ) 0 0,
    
    linear-gradient(to left,
      $transparent $min,
      $color-3 $min, $color-3 $max*7, 
      $transparent $max*7
      ) 0 0,
    linear-gradient(to right,
      $transparent $min,
      $color-3 $min, $color-3 $max*8, 
      $transparent $max*8
      ) 0 0,
    linear-gradient(to bottom,
      $transparent $min,
      $color-3 $min, $color-3 $max*7, 
      $transparent $max*7
      ) 0 0,
    linear-gradient(to top,
      $transparent $min,
      $color-3 $min, $color-3 $max*8, 
      $transparent $max*8
      ) 0 0,
    
    linear-gradient(to left,
      $transparent $min,
      $color-4 $min, $color-4 $max*8, 
      $transparent $max*8
      ) 0 0,
    linear-gradient(to right,
      $transparent $min,
      $color-4 $min, $color-4 $max*9, 
      $transparent $max*9
      ) 0 0,
    linear-gradient(to bottom,
      $transparent $min,
      $color-4 $min, $color-4 $max*8, 
      $transparent $max*8
      ) 0 0,
    linear-gradient(to top,
      $transparent $min,
      $color-4 $min, $color-4 $max*9, 
      $transparent $max*9
      ) 0 0,
    
    linear-gradient(to left,
      $transparent $min,
      $color-5 $min, $color-5 $max*9, 
      $transparent $max*9
      ) 0 0,
    linear-gradient(to right,
      $transparent $min,
      $color-5 $min, $color-5 $max*10, 
      $transparent $max*10
      ) 0 0,
    linear-gradient(to bottom,
      $transparent $min,
      $color-5 $min, $color-5 $max*9, 
      $transparent $max*9
      ) 0 0,
    linear-gradient(to top,
      $transparent $min,
      $color-5 $min, $color-5 $max*10, 
      $transparent $max*10
      ) 0 0
    
    ;
  background-size:  $big-size $big-size;
  background-color: $bgcolor;
  background-repeat: repeat;
  font: 16px/2 'Trebuchet MS', Verdana, sans-serif;
  }

Demo

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

CodeTea

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

Read More