JSFiddle - React, Tailwind, and code Playground

by brunomuller

HTML

<a class="gradient" href="#">Blog</a>

SCSS

body {
  background-color: #000;
  margin: 0;
}

a.gradient {
  text-decoration: none;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 12rem;
  -webkit-text-stroke: 0.0125em #7d00ff;
  text-stroke: 0.0125em #7d00ff;
  color: transparent;
  background: linear-gradient(#7d00ff, #7d00ff) bottom no-repeat, transparent;
  background-size: 100% 0%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.7s;
  &:hover {
    background-size: 100% 100%;
  }
}