[codepenembed height=”300″ themeid=”16787″ slughash=”dorKoW” defaulttab=”result” user=”brandonhimpfen”]See the Pen Radial Background Gradient Sass Mixin by Brandon Himpfen (@brandonhimpfen) on CodePen.[/codepen_embed]The following is a Sass mixin that creates a radial background gradient.

// Background Gradient: Radial
// See:  http://www.himpfen.com/radial-background-gradient-sass-mixin/
// Usage: @include bg-radial(start colour, start position, end colour, end position);
// Example: @include bg-radial(#fff, 0%, #000, 100%);
@mixin bg-radial($start-colour, $start-position, $end-colour, $end-position) {
  background: -moz-radial-gradient(center, ellipse cover, $start-colour $start-position, $end-colour $end-position);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, Colour-stop($start-position,$start-colour), Colour-stop($end-position,$end-colour));
  background: -webkit-radial-gradient(center, ellipse cover, $start-colour $start-position,$end-colour $end-position);
  background: -o-radial-gradient(center, ellipse cover, $start-colour $start-position,$end-colour $end-position);
  background: -ms-radial-gradient(center, ellipse cover, $start-colour $start-position,$end-colour $end-position);
  background: radial-gradient(ellipse at center, $start-colour $start-position,$end-colour $end-position);
}

To use the Sass mixin:

@include bg-radial(start colour, start position, end colour, end position);

The start and end position are represented by percentage, and typically 0% and 100%.

An example of how to use the code snippet which is used in this tutorial’s example:

@include bg-radial(#FFEB3B, 0%, #F44336, 100%)