JSFiddle - React, Tailwind, and code Playground

by kanonji

HTML

<p>
おめがってるー！？
</p>

<svg viewBox="0 0 200 20">
  <defs>
    <linearGradient id="rainbow" x1="0" x2="0" y1="0" y2="100%" gradientUnits="userSpaceOnUse" >
      <stop stop-color="rgb(254, 127, 126)" offset="0%"/>
      <stop stop-color="rgb(254, 127, 126)" offset="48%"/>
      <stop stop-color="rgb(47, 168, 249)" offset="152%"/> 
      <stop stop-color="rgb(47, 168, 249)" offset="100%"/> 
    </linearGradient>
  </defs>
    <text x="0" y="50%" class="background">おめがってるー！？</text>
    <text x="0" y="50%" fill="url(#rainbow)">おめがってるー！？</text>
</svg>

CSS

body {background-color: #999;}

p {
  font-size: 50px;
  font-weight: bold;
  background: linear-gradient(to bottom, rgb(254, 127, 126), rgb(254, 127, 126) 44%, rgb(47, 168, 249) 50%);
  background-clip: text;
  color: white;
  -webkit-text-fill-color: transparent;
}

svg {
  display: inline-block;
  width: 250px;
  height: auto;
  overflow: visible;
}

.background {
  stroke: white;
  stroke-width: 4;
  stroke-linejoin: round;
}