Gradient Title

by Felipe Kautzmann

HTML

<h3 class="title" aria-label="Logotipo, Redes Sociais, Site">
  <span class="position" style="--content:'Develop.';--padding:0.05em;--start-color:#007CF0;--end-color:#00DFD8">
    <span class="gradient animated-gradient-text_foreground-1__3O_nT">Design
    </span>
  </span>
  <span class="position" style="--content:'Preview.';--padding:0.05em;--start-color:#7928CA;--end-color:#FF0080">
    <span class="gradient animated-gradient-text_foreground-2__BYeW7">Sem
    </span>
  </span>
  <span class="position" style="--content:'Ship.';--padding:0.05em;--start-color:#FF4D4D;--end-color:#F9CB28">
    <span class="gradient animated-gradient-text_foreground-3__3Khgf">DorDeCabeça
    </span>
  </span>
</h3>

CSS

h3 {
  display: block;
  font-family: Helvetica;
  font-size: 5em;
  font-weight: bold;
}

.gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-left: var(--padding);
    padding-right: var(--padding);
    background-image: linear-gradient(90deg,var(--start-color),var(--end-color));
    position: relative;
    z-index: 1;
  }
  
.title {
  font-size: 5em;
}

.position {
  position: relative;
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}