<div class="contain">
  <svg width="750px" height="300px" fill="url(#Gradient-1)">
    <defs>
      <linearGradient id="Gradient-1" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
        <stop offset="10%" stop-color="#48afc1" />
        <stop offset="10%" stop-color="#b4c63b" />
        <stop offset="20%" stop-color="#ef5b2b" />
        <stop offset="20%" stop-color="#503969" />
        <stop offset="30%" stop-color="#ab6294" />
        <stop offset="30%" stop-color="#1cb98f" />
        <stop offset="40%" stop-color="#48afc1" />
        <stop offset="40%" stop-color="#b4c63b" />
        <stop offset="50%" stop-color="#ef5b2b" />
        <stop offset="50%" stop-color="#503969" />  
        <stop offset="60%" stop-color="#ab6294" />
        <stop offset="60%" stop-color="#1cb98f" />
        <stop offset="70%" stop-color="#48afc1" />
        <stop offset="70%" stop-color="#b4c63b" />
        <stop offset="80%" stop-color="#ef5b2b" />
        <stop offset="80%" stop-color="#503969" />
        <stop offset="90%" stop-color="#ab6294" />
        <stop offset="90%" stop-color="#1cb98f" />
        <stop offset="100%" stop-color="#48afc1" />
      </linearGradient>
    </defs>
    <text x="15%" y="75%">Apple</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;
}

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

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