$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;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.