Striped Background Gradient Sass Mixin

Learn how-to create a striped background gradient using a Sass mixin.

Learn | Sass

Striped Background Gradient Sass Mixin
// Striped Background Gradient Sass Mixin
// See:
// Usage: @include bg-striped(direction, list of colours);
// Example: @include bg-striped(to top, #8e44ad #2c3e50 #2980b9 #16a085 #27ae60);
@mixin bg-striped($direction, $colors) {
  $length: length($colors);
  @if $length > 1 {
    $stripes: ();
    @for $i from 1 through $length {
      $stripe: (100% / $length) * ($i - 1);
      @if $i > 1 {
        $stripes: append($stripes, nth($colors, $i - 1) $stripe, comma);
      $stripes: append($stripes, nth($colors, $i) $stripe, comma);
    background-image: linear-gradient($direction, $stripes);
  } @else if $length == 1 {
    background-color: $colors;


Add the following where you want a striped background gradient:

@include bg-striped(direction, list of colours);

Direction can be top, left, bottom or right. You can list how many colours you want. You are only limited based on the height or width of the body or HTML element.


Here is an example of how to use the striped background gradient Sass mixin:

@include bg-striped(to top, #FFC107 #FF9800 #8BC34A #2196F3 #9C27B0);