[codepenembed height=”300″ themeid=”16787″ slughash=”vKygKe” defaulttab=”result” user=”brandonhimpfen”]See the Pen Striped Gradient Mixin by Brandon Himpfen (@brandonhimpfen) on CodePen.[/codepen_embed]The following is a Sass mixin that will create a striped background gradient. The striped background gradient can be applied to the body or an HTML element.

// Striped Background Gradient Sass Mixin
// See: http://www.himpfen.com/striped-background-gradient-sass-mixin/
// 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);