$transp: rgba(255,255,255,0);

$color-1:  hsl(50, 40%, 75%);
$color-2:  hsl(50, 65%, 65%);
$color-3:  hsl(240, 75%, 55%);
$bg-color: hsl(240, 100%, 20%);

$colors-blue:  
  $color-1, $transp, 
  $color-2, $transp, 
  $color-3, $transp, 
  $color-2, $transp, 
  $color-1, $transp;

$blue: (
  colors: $colors-blue,
  bg-color: $bg-color
);

@function gradient($colors) {
  
  $out: $transp;
  $step: percentage(1/length($colors)/2);
  
  @for $item from 1 through length($colors) {
    $color: nth($colors, $item);
    
    $pos-before: $step * ($item - 1); 
    $pos-after: $step * $item; 
   
    $out: append($out, $color $pos-before, comma);
    $out: append($out, $color $pos-after, comma);
  }
  
  @return $out;
}

@mixin gradient-set ($colors-set: $cold){
  $grad-colors: map-get($colors-set, colors);
  $bg-color: map-get($colors-set, bg-color);
  $size: 5;//length($grad-colors);
  $sizeUnits: #{$size}em;
  $halfUnits: #{$size/2}em;

  background-image: 
    radial-gradient(circle at left, gradient($grad-colors)), 
    radial-gradient(circle at right, gradient($grad-colors)),
    radial-gradient(circle at left, gradient($grad-colors)), 
    radial-gradient(circle at right, gradient($grad-colors));
  background-color: $bg-color;
  background-size: $sizeUnits $sizeUnits;
  background-position: 
    0 0, 
    0 $halfUnits, 
    $halfUnits 0, 
    $halfUnits $halfUnits;
  }



HTML, BODY {
  height: 100%;
}

$mode: overlay;
$mode-2: soft-light;

BODY {
  @include gradient-set($blue);
/*  normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity;  */
  background-blend-mode: $mode, $mode, $mode-2, $mode-2;
  }