<div class="background">
<svg class="grad-svg">
  <text x="0" y="30">おはようございます</text>
 </svg>
    <svg class="box" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="gradation">
          <stop offset="0%" stop-color="#00BCD4"></stop>
          <stop offset="50%" stop-color="#f8f3d4"></stop>
          <stop offset="100%" stop-color="#f6416c"</stop>
        </linearGradient>
      </defs>
 </svg>
</div>
.background{
  position:relative;
  background-color:black;
}

.grad-svg{
  font-size: 30px;
  fill: url(#gradation);
  width: 809px;
  height: 40px;
}

.box{
background-color:#ffffff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.