Linear Gradient

Arguments

NameTypeDescription
$directionstring, number

Sets the gradient line’s direction of angle. Accepts top, top-right, right, bottom-right, bottom, bottom-left, left, top-left values as a string. Or you can pass a custom value as a number followed by a deg unit.

$colorslist

Accepts a list of colors with or without the color-stop points. You can pass as many color values ​​as you want.

* Important: When you use the color-stop points together with the color values, each group of values must be wrapped with parentheses and separated by space. For more see the examples.

Examples

Simply call the mixin in a selector pass some values both for $direction and $color parameters.

.element{
  @include linear-gradient(right, #43c6ac #191654);
}
//CSS Output
.element {
  background: linear-gradient(to right, #43c6ac, #191654);
}

Let’s try it with the named arguments and add one more color-stop.

.element{
  @include linear-gradient(
    $direction: right,
    $colors: #43c6ac #191654 #963d91
  );
}
//CSS Output
.element {
  background: linear-gradient(to right, #43c6ac, #191654, #963d91);
}

We can use the color-stop positioning to adjust the transition between the colors.

.element{
  @include linear-gradient(
    $direction: right,
    $colors: (#1a2a6c 0 10%) (#b21f1f 30% 60%) (#fdbb2d 90% 100%)
  );
}
//CSS Output
.element {
  background: linear-gradient(to right, #1a2a6c 0 10%, #b21f1f 30% 60%, #fdbb2d 90% 100%);
}

Let’s sharpen the transition between the color-stops.

.element{
  @include linear-gradient(
    $direction: right,
    $colors: (#1a2a6c 25%) (#b21f1f 25% 50%) (#fdbb2d 50% 75%) (orange 75% 100%)
  );
}
//CSS Output
.element {
  background: linear-gradient(to right, #1a2a6c 25%, #b21f1f 25% 50%, #fdbb2d 50% 75%, orange 75% 100%);
}