Text Gradient

    Type: Mixin
    @include text-gradient();
    * You can call mixins with or without gls- namespace (e.g. @include gls-text-gradient();).
    Text Gradient Sass mixin (also know as CSS Gradient Text) helps you to add a gradient overlay to a text element. Provides a one-line method to set the gradient line’s angle of direction, color values and the color-stop positions very easily.

    A color-stop position can be defined by length or a percentage units.
    Github Source Code

    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

    First, let’s forget about color-stop positioning and pass some values only for $direction and $color parameters.

    .element{
  @include text-gradient(right, orange red purple blue green);
}
    //CSS Output
.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;
}

    Text Gradient is Awesome!

    One-line method (also known as ordinal arguments) may be confusing sometimes. To explain how this mixin works clearly let’s use named argumens method (not the hard way but time consuming) to pass some values.

    .element{
  @include text-gradient(
    $direction: top-left,
    $colors: red orange
  );
}
    //CSS Output
.element {
  background: linear-gradient(
    to top left, red, orange
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

    Text Gradient is Awesome!

    Now let’s try it with color-stop positions to make it a bit complex.

    .element{
  @include text-gradient(
    $direction: bottom,
    $colors: (red 50%) (orange 50%) 
  );
}
    //CSS Output
.element {
  background: linear-gradient(
    to bottom, red 50%, orange 50%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

    Text Gradient is Awesome!

    You can use the starting-position and the ending-positions of a color together.

    .element{
  @include text-gradient(
    $direction: top,
    $colors: (green 0 40%) (blue 40% 60%) (purple 60% 100%) 
  );
}
    //CSS Output
.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;
}

    Text Gradient is Awesome!

    The transitions between the colors do not always have to be that sharp like in the above examples.

    .element{
  @include text-gradient(
    $direction: bottom,
    $colors: (red 30%) (orange 60%) (brown 80%)
  );
}
    //CSS Output
.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;
}

    Text Gradient is Awesome!

    If you want to master this you must have a clear understanding of how linear-gradient() works. For more check out the links below:

    Jan 21, 2022 Edit this page