Text Stroke

Arguments

NameTypeDescription
$colorcolor

Sets the color of a text. The default color value is set to transparent.

$stroke-colorcolor

Sets the stroke color of a text. The default stroke color value is black.

$fallback-colorcolor

This option is for non-supporting browsers. It will prevent text to disappear entirely in non-supporting browsers. The default value is black.

$stroke-widthnumber (with unit)

Sets the width of the stroke. You can pass thin, medium, thick values as a string as well to set the width of the stroke.

* Design Tip: When your stroke color is dark try to make the fallback color the same to make the text look more consistent with the rest of the design.

Examples

Simply call the mixin without passing any argument.

.element {
  @include text-stroke;
}
//CSS Output
.element {
  color: black;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: black;
  -webkit-text-stroke-width: 1px;
}

Text Stroke is Awesome!

Now pass some arguments to make the text look sexier!

.element {
  @include text-stroke(
    $color: azure,
    $stroke-color: cadetblue,
    $fallback-color: cadetblue,
    $stroke-width: 1px
  );
}
//CSS Output
.element {
  color: cadetblue;
  -webkit-text-fill-color: azure;
  -webkit-text-stroke-color: cadetblue;
  -webkit-text-stroke-width: 1px;
}

Text Stroke is Awesome!