$transp: rgba(255,255,255,0);
$dark: teal;//dodgerblue

$colors-warm: 
  yellow,
  darken($dark, 30%),
  darken($dark, 20%),
  darken($dark, 10%),
  $dark,
  orange,
  orangered,
  gold,
  $dark,
  darken($dark, 20%),
  darken($dark, 10%),
  darken($dark, 30%), 
  orangered;

$colors-warm-circle: 
  gold,
  orange,
  orangered,
  $dark,
  darken($dark, 10%),
  darken($dark, 20%),
  darken($dark, 30%),
  $transp;

$warm: (
  colors: $colors-warm,
  bg-color: teal
);

@function gradient($colors, $direct: 0deg) {
  
  $out: null;
  
  @for $item from 1 through length($colors) {
    $color: nth($colors, $item);
    $end: percentage($item/length($colors));
    $begin: $end - 10;
    $out: append($out, $color $begin, comma);
    $out: append($out, $color $end, comma);
  }
  
  @return linear-gradient($direct, $out);
}

@function rad-gradient($colors, $direct: circle) {
  
  $out: yellow;
  
  @for $item from 1 through length($colors) {
    $color: nth($colors, $item);
    $end: percentage($item/length($colors));
    $begin: $end - 10;
    $out: append($out, $color $begin, comma);
    $out: append($out, transparentize($color,.9) $end, comma);
  }
  
  @return radial-gradient($direct, $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);

  background-image: 
    rad-gradient($colors-warm-circle),
    rad-gradient($colors-warm-circle)/*,
    gradient($grad-colors),
    gradient($grad-colors, $direct: 90deg)*/;
  background-color: $bg-color;
  background-size: 
/*     #{$size/1.5}em #{$size/1.5}em,  */
    #{$size}em #{$size}em;
  background-position: 0 0, #{$size/2}em #{$size/2}em;
  }



HTML, BODY {
  height: 100%;
}

$mode: color-dodge;

BODY {
  @include gradient-set($warm);
/*  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, normal; }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.