SVG Gradients
Define linear or radial gradients in <defs> and apply them with fill="url(#id)".
HTML
Intermediate
4 min read
SVG Gradients
Example
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="steelblue"/>
<stop offset="100%" stop-color="coral"/>
</linearGradient>
</defs>
<rect width="200" height="100" fill="url(#grad)" rx="8"/>
<text x="100" y="58" text-anchor="middle" fill="white" font-size="18">Gradient</text>
</svg> Pro Tip
Always define reusable SVG assets like gradients inside