<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1250 400" width="1250" height="400">
  <!-- add title for accessibility -->
  <title>Gradient-filled Text</title>
  <!-- SOurce: http://lea.verou.me/2012/05/text-masking-the-standards-way/ -->
  <defs>
    <linearGradient id="filler" x="0%" y="0%">
      <stop stop-color="gold" offset="0%"></stop>
      <stop stop-color="purple" offset="20%"></stop>
      <stop stop-color="deepPink" offset="40%"></stop>
      <stop stop-color="orange" offset="60%"></stop>
      <stop stop-color="yellow" offset="80%"></stop>
      <stop stop-color="skyblue" offset="100%"></stop>
    </linearGradient>
  </defs>
  <text x="100" y="70%" font-size="205" fill="url(#filler)"> Radiant Text</text>
</svg>
@import url(https://fonts.googleapis.com/css?family=Bad+Script);

svg {
  width: 100%;
  height: auto;
}

text {
  font-weight: bolder; 
  font-family: bad script;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.