Linear Gradient
gls- namespace (e.g. @include gls-linear-gradient();).Linear Gradient Sass mixin helps you to generate colorful CSS gradients, and it combines them with image and text elements. In this way, you can create beautiful page components.
The one-line method makes it very easy to use. To generate a linear gradient you must pass values for gradient’s angle of $direction and at least two color values. You can also add color-stop points (starting and ending positions of colors).
A color-stop points can be defined bylengthor apercentageunits.
Arguments
| Name | Type | Description |
|---|---|---|
$direction | string, number | Sets the gradient line’s direction of angle. Accepts |
$colors | list | 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%);
}