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