<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.