Gerillass
v2.1.0* You can call mixins with or without the gls- namespace (e.g. @include gls-text-gradient();).
The Text Gradient Sass mixin (also known as CSS Gradient Text) helps you add a gradient overlay to a text element. It provides a one-line method to set the direction of the gradient line, the color values, and the color stop positions very easily.
Arguments
| Name | Type | Description |
|---|---|---|
$direction | string, number | Sets the direction of the gradient line. Accepts the string values top, top-right, right, bottom-right, bottom, bottom-left, left, and top-left. You can also pass a custom value as a number followed by a deg unit. |
$colors | list | Accepts a list of colors, with or without color stop points. You can pass as many color values as you want. |
Important: When you use color stop points together with the color values, each group of values must be wrapped in parentheses and separated by a space. See the <a href='#examples'>examples</a> for more.
Examples
First, let's forget about color stop positioning and pass values only for the $direction and $colors arguments.
.element{
@include text-gradient(right, orange red purple blue green);
}.element {
background: linear-gradient(to right, orange, red, purple, blue, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}The one-line method (also known as using positional arguments) can be confusing sometimes. To explain clearly how this mixin works, let's use named arguments (not harder, just a little slower) to pass some values.
.element{
@include text-gradient(
$direction: top-left,
$colors: red orange
);
}.element {
background: linear-gradient(to top left, red, orange);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}Now let's try it with color stop positions to make it a bit more complex.
.element{
@include text-gradient(
$direction: bottom,
$colors: (red 50%) (orange 50%)
);
}.element {
background: linear-gradient(to bottom, red 50%, orange 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}You can use the starting position and the ending position of a color together.
.element{
@include text-gradient(
$direction: top,
$colors: (green 0 40%) (blue 40% 60%) (purple 60% 100%)
);
}.element {
background: linear-gradient(to top, green 0 40%, blue 40% 60%, purple 60% 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}The transitions between the colors do not always have to be as sharp as in the examples above.
.element{
@include text-gradient(
$direction: bottom,
$colors: (red 30%) (orange 60%) (brown 80%)
);
}.element {
background: linear-gradient(to bottom, red 30%, orange 60%, brown 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}If you want to master this, you need a clear understanding of how linear-gradient() works. For more, check out the links below: