In a previous tutorial, I showed you two Sass mixins to create linear gradient backgrounds. In this tutorial, I’m going to show you how-to create a single radial gradient background Sass mixin.Example

See the Pen Radial Background Gradient Sass Mixin by Brandon Himpfen (@brandonhimpfen) on CodePen.

Radial Gradient Background Sass Mixin:

// Background Gradient: Radial
@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);
}

Usage:

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

Where start colour is the starting colour of the start position and end colour is the end colour of the end position.

Example:

@include bg-radial(#ffff, 0%, #000, 100%)

Based on the above example, the output CSS is:

background: -moz-radial-gradient(center, ellipse cover, #FFEB3B 0%, #F44336 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, Colour-stop(0%, #FFEB3B), Colour-stop(100%, #F44336));
background: -webkit-radial-gradient(center, ellipse cover, #FFEB3B 0%, #F44336 100%);
background: -o-radial-gradient(center, ellipse cover, #FFEB3B 0%, #F44336 100%);
background: -ms-radial-gradient(center, ellipse cover, #FFEB3B 0%, #F44336 100%);
background: radial-gradient(ellipse at center, #ffeb3b 0%, #f44336 100%);