<div class="contain">
  <svg width="750px" height="300px" fill="url(#Gradient1)">
    <defs>
      <radialGradient id="Gradient1" cy="60%" fx="45%" fy="45%" r="2">
        <stop offset="0%" stop-color="#48afc1" />
        <stop offset="10%" stop-color="#b4c63b" />
        <stop offset="20%" stop-color="#ef5b2b" />
        <stop offset="30%" stop-color="#503969" />
        <stop offset="40%" stop-color="#ab6294" />
        <stop offset="50%" stop-color="#1cb98f" /> 
        <stop offset="60%" stop-color="#48afc1" />
        <stop offset="70%" stop-color="#b4c63b" />
        <stop offset="80%" stop-color="#ef5b2b" />
        <stop offset="90%" stop-color="#503969" />
        <stop offset="100%" stop-color="#ab6294" />
      </radialGradient>
    </defs>
    <text x="15%" y="75%">Grape </text>
  </svg>
 </div>

<p class="p">Demo by Joni Trythall. <a href="http://www.sitepoint.com/getting-started-svg-gradients/">See article</a>.</p>

@import url(https://fonts.googleapis.com/css?family=Signika);

/* Basic styling */
body {
  background: #f3f3f3;
}

.contain {
  margin: auto;
  text-align: center;
  max-width: 850px;
}

text {
  font-size: 200px;
  font-weight: bold;
  font-family: 'Signika', sans-serif;
}

.p {
  text-align: center;
  font-family: Arial, sans-serif;
}