Gerillass: Text Gradient Sass Mixin

Text Gradient

Type: Mixin

@include text-gradient();

* 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.

A color stop position can be defined with length or percentage units.

Changed in Gerillass 3.0.0: the colours come first, and the direction is a named argument. text-gradient("top", (red, blue)) is now text-gradient((red, blue), $direction: top). A call in the old order stops the build with the new form written out. The mixin also takes every argument the gradient mixin takes, so text can carry a radial, conic or repeating gradient and blend in a colour space.

Arguments

Name	Type	Description
`$colors`	list	The colour stops, in the forms the `gradient` mixin takes. Each stop is a colour with up to two positions, wrapped in parentheses when it has positions.
`$type`	string	`linear`, the default, `radial` or `conic`.
`$direction`	string, number	Linear only. A name such as `top` or `bottom-left`, an angle in any unit, `"to left top"`, or `var()`.
`$shape`	string	Radial only. `circle` or `ellipse`, with an optional size.
`$position`	string	Radial or conic. A name such as `center`, or `"at 30% 40%"`.
`$from`	number	Conic only. The angle the gradient starts at.
`$in`	string	A colour space such as `oklab`.
`$repeating`	boolean	`true` for a repeating gradient.

Examples

The basics

Pass the colours and a direction. As many colours as you like.

Sass

.element{
  @include text-gradient(orange red purple blue green, $direction: right);
}

CSS

.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;
}

Result

With named arguments the call reads the same in any order.

Sass

.element{
  @include text-gradient(
    $colors: red orange,
    $direction: top-left
  );
}

CSS

.element {
  background: linear-gradient(to top left, red, orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

Result

Colour stop positions make the colours meet at a hard edge.

Sass

.element{
  @include text-gradient((red 50%) (orange 50%), $direction: bottom);
}

CSS

.element {
  background: linear-gradient(to bottom, red 50%, orange 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

Result

A colour can take a start and an end position.

Sass

.element{
  @include text-gradient(
    (green 0 40%) (blue 40% 60%) (purple 60% 100%),
    $direction: top
  );
}

CSS

.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;
}

Result

The transitions do not have to be sharp.

Sass

.element{
  @include text-gradient((red 30%) (orange 60%) (brown 80%), $direction: bottom);
}

CSS

.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;
}

Result

Blend in oklab for an even transition between two colours.

Sass

.element{
  @include text-gradient(#2563eb #db2777, $direction: right, $in: oklab);
}

CSS

.element {
  background: linear-gradient(to right, #2563eb, #db2777);
  background: linear-gradient(to right in oklab, #2563eb, #db2777);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

Result

A conic gradient sweeps a rainbow round the middle of the words.

Sass

.element{
  @include text-gradient(#ef4444 #f59e0b #22c55e #3b82f6 #a855f7 #ef4444, conic);
}

CSS

.element {
  background: conic-gradient(#ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7, #ef4444);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

Result

A repeating gradient stripes the letters, a retro poster look.

Sass

.element{
  @include text-gradient(
    (#db2777 0 6px) (#f59e0b 6px 12px),
    $direction: 45deg,
    $repeating: true
  );
}

CSS

.element {
  background: repeating-linear-gradient(45deg, #db2777 0 6px, #f59e0b 6px 12px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

Result

In real interfaces

Each of these is the mixin alone. The only other declaration is the font, so the letters are big enough to show the gradient. They are spans rather than blocks: the gradient paints the element's box, and a block is as wide as the page, so a diagonal, radial or conic gradient would spread far past the word.

Highlight one word of a hero headline. The gradient sits on a span, so the rest of the sentence keeps its colour.

Sass

.headline{
  font: 800 44px/1.1 system-ui, sans-serif;

  span{
    @include text-gradient(#6366f1 #ec4899, $direction: right, $in: oklab);
  }
}

CSS

.headline {
  font: 800 44px/1.1 system-ui, sans-serif;
}
.headline span {
  background: linear-gradient(to right, #6366f1, #ec4899);
  background: linear-gradient(to right in oklab, #6366f1, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

Result

A price on a pricing card, blended in oklch so the colours stay vivid across the digits.

Sass

.price{
  font: 800 72px/1 system-ui, sans-serif;
  @include text-gradient(#0ea5e9 #22c55e, $direction: 135deg, $in: oklch);
}

CSS

.price {
  font: 800 72px/1 system-ui, sans-serif;
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
  background: linear-gradient(135deg in oklch, #0ea5e9, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

Result

A gold label for a premium tier. Stops crowded at the middle give the letters the bright band that metal has.

Sass

.premium{
  font: 900 48px/1 system-ui, sans-serif;
  @include text-gradient(
    (#8b6508 0%) (#ffd700 45%) (#fff8dc 50%) (#daa520 55%) (#8b6508 100%),
    $direction: top
  );
}

CSS

.premium {
  font: 900 48px/1 system-ui, sans-serif;
  background: linear-gradient(to top, #8b6508 0%, #ffd700 45%, #fff8dc 50%, #daa520 55%, #8b6508 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

Result

A wordmark split in two colours by a hard diagonal, from two stops that meet at 50%.

Sass

.wordmark{
  font: 900 64px/1 system-ui, sans-serif;
  @include text-gradient((#0f172a 50%) (#f97316 50%), $direction: 135deg);
}

CSS

.wordmark {
  font: 900 64px/1 system-ui, sans-serif;
  background: linear-gradient(135deg, #0f172a 50%, #f97316 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

Result

A glowing title: a radial gradient is brightest in the middle of the word and cools towards the ends.

Sass

.glow{
  font: 900 56px/1 system-ui, sans-serif;
  @include text-gradient(#f0abfc #a855f7 #3b82f6, radial, $shape: ellipse, $position: center);
}

CSS

.glow {
  font: 900 56px/1 system-ui, sans-serif;
  background: radial-gradient(ellipse at center, #f0abfc, #a855f7, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

Result

A holographic label. A conic gradient blended the long way round the hue circle gives the letters every colour at once.

Sass

.holo{
  font: 900 64px/1 system-ui, sans-serif;
  @include text-gradient(#f472b6 #f472b6, conic, $from: 45deg, $in: oklch longer hue);
}

CSS

.holo {
  font: 900 64px/1 system-ui, sans-serif;
  background: conic-gradient(from 45deg, #f472b6, #f472b6);
  background: conic-gradient(from 45deg in oklch longer hue, #f472b6, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

Result

What it refuses

A call in the order used before 3.0.0 stops the build and shows the new form.

Sass

.element {
  @include text-gradient("top", (red, blue));
}

Error: `text-gradient` takes the colours first since 3.0.0. Write `text-gradient((red, blue), $direction: "top")`.

A colour stop the browser drops stops the build too. Here it matters twice: the browser drops the gradient, and the mixin has already made the text transparent, so the text disappears.

Sass

.element {
  @include text-gradient((huge, blue));
}

Error: `huge, blue` is not a valid $colors for `text-gradient`: `huge` is not a colour stop: it is not a colour. A browser drops the whole gradient.

Text Gradient

Arguments

Examples

The basics

In real interfaces

What it refuses

Related Links