Skip to content

Instantly share code, notes, and snippets.

@kabilashgit
Created March 20, 2019 12:15
Show Gist options
  • Save kabilashgit/50529c4f02abaf106cbf13c0994a5c5d to your computer and use it in GitHub Desktop.
Save kabilashgit/50529c4f02abaf106cbf13c0994a5c5d to your computer and use it in GitHub Desktop.
Mixin to add gradient text

mixin for gradient text

mixin

@mixin gradient-text() {
  background: linear-gradient(70deg, #ef0866, #ff1e0c, #ef0866); //use any color
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

usage in scss

.className {
    @include gradient-text();
}

output in .css

.className {
    background: linear-gradient(70deg, #ef0866, #ff1e0c, #ef0866); //use any color
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment