JSFiddle - React, Tailwind, and code Playground

by 3rror404

HTML

<h1 class="fancy">
  filosofia
</h1>

<svg height="200" width="500">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(139,237,137); stop-opacity:1"/>
      <stop offset="45%" style="stop-color:rgb(139,237,137); stop-opacity:1"/>
      <stop offset="50%" style="stop-color:rgb(255,255,255); stop-opacity:1"/>
      <stop offset="55%" style="stop-color:rgb(139,237,137); stop-opacity:1"/>
      <stop offset="100%" style="stop-color:rgb(139,237,137); stop-opacity:1"/>
    </linearGradient>
  </defs>
  <text x="0" y="150" fill="url(#gradient)" class="svg_text">
    filosofia
  </text>
</svg>

CSS

body {
  background: orange;
}

.fancy {
  background: #8bed89;
  background: -moz-linear-gradient(top, #8bed89 0%, #8bed89 45%, #ffffff 51%, #8bed89 56%, #8bed89 100%);
  background: -webkit-linear-gradient(top, #8bed89 0%, #8bed89 45%, #ffffff 51%, #8bed89 56%, #8bed89 100%);
  background: linear-gradient(to bottom, #8bed89 0%, #8bed89 45%, #ffffff 51%, #8bed89 56%, #8bed89 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.svg_text, h1 {
  font-size: 72px;
  font-weight: bold;
}