Font Gradient

by kuonyuu

HTML

<h1 class="c-content-title__title c-txt-grade_camel">
  CHARACTER</h1>

CSS

.c-content-title__title {
  line-height: 1;
  letter-spacing: .15em;
  font-size: 48px;
  font-family: "ff-nexus-mix",sans-serif;
  font-weight: 400;
}

.c-txt-grade_camel {
  --c-txt-grade_camel--start: calc(.2em + 52%);
  --root-font-color: #000;
  --root-color_blue: #00afec;
  background-size: 200% 100%;
  background-position: 100% top;
  background-repeat: no-repeat;
  background-image: linear-gradient(135deg,var(--root-color_blue) var(--c-txt-grade_camel--start),var(--root-font-color) var(--c-txt-grade_camel--start));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.c-mainmenu a.c-mainmenu__link:hover {
  background-position: 0 top;
}