Radial Background Gradient Sass Mixin

Sass CSS

// Background Gradient: Left to Right
    @mixin bg-gradient-l2r($start-colour, $end-colour) {
        background-color: $start-colour;
        background-image: -webkit-gradient(linear, left top, right top, from($start-colour), to($end-colour));
        background-image: -webkit-linear-gradient(left, $start-colour, $end-colour);
        background-image:    -moz-linear-gradient(left, $start-colour, $end-colour);
        background-image:     -ms-linear-gradient(left, $start-colour, $end-colour);
        background-image:      -o-linear-gradient(left, $start-colour, $end-colour);
        background-image:         linear-gradient(left, $start-colour, $end-colour);
        filter:            progid:DXImageTransform.Microsoft.gradient(start-colourStr='#{$start-colour}', end-colourStr='#{$end-colour}', gradientType='1');
    }
    ```

Example CSS Implementation

html {
  width: 100%;
  height: 100%;
  @include bg-radial(#FFEB3B, 0%, #F44336, 100%)
}
Show Comments