/ Background Patterns

Silver Scale Pattern

Silver Scale Pattern

Silver Scale Pattern

Silver Scale Pattern Made by yokse.

Made with

Html
Css/scss

Author

yoksel

Css

$color-1: #C7B773;
$color-1-t: transparentize($color-1, 1);

$color-2: #E3DB9A;
$color-2-t: transparentize($color-2, 1);

$color-3: #F5FCD0;
$color-3-t: transparentize($color-3, 1);

$color-4: #B1C2B3;
$color-4-t: transparentize($color-4, 1);

$color-5: #778691;
$color-5-t: transparentize($color-5, 1);

$size: 3em;
$step: 6.5%;

$bgcolor: $color-1;

HTML {
  height: 100%;
  }

BODY {
  background: 
    radial-gradient(circle at center 0,
      $color-4 $step,
      $color-5 $step, $color-5 $step*2,
      $color-1 $step*2.2, $color-1 $step*3,
      $color-2 $step*3.2, $color-2 $step*4,
      $color-3 $step*4.2,  $color-3 $step*5,
      $color-4 $step*5.2,  $color-4 $step*6,
      $color-5 $step*6.2,  $color-5 $step*7,
      $color-5-t $step*7.2
      ) 0 0,
    
    radial-gradient(circle at center 0,
      $color-4 $step,
      $color-5 $step, $color-5 $step*2,
      $color-1 $step*2.2, $color-1 $step*3,
      $color-2 $step*3.2, $color-2 $step*4,
      $color-3 $step*4.2,  $color-3 $step*5,
      $color-4 $step*5.2,  $color-4 $step*6,
      $color-5 $step*6.2,  $color-5 $step*7,
      $color-5-t $step*7.2
      ) $size/2 $size/2,
    radial-gradient(circle at center $size,
      $color-4 $step,
      $color-5 $step, $color-5 $step*2,
      $color-1 $step*2.2, $color-1 $step*3,
      $color-2 $step*3.2, $color-2 $step*4,
      $color-3 $step*4.2,  $color-3 $step*5,
      $color-4 $step*5.2,  $color-4 $step*6,
      $color-5 $step*6.2,  $color-5 $step*7,
      $color-5-t $step*7.2
      ) 0 0,
    radial-gradient(circle at center $size,
      $color-4 $step,
      $color-5 $step, $color-5 $step*2,
      $color-1 $step*2.2, $color-1 $step*3,
      $color-2 $step*3.2, $color-2 $step*4,
      $color-3 $step*4.2,  $color-3 $step*5,
      $color-4 $step*5.2,  $color-4 $step*6,
      $color-5 $step*6.2,  $color-5 $step*7,
      $color-5-t $step*7.2
      ) $size/2 $size/2
    ;
  
  background-color: $bgcolor;
  background-size: $size $size;
  }

Demo

See the Pen Silver scale by yoksel (@yoksel) on CodePen.

CodeTea

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

Read More