Convert text to SVG paths quickly and easily

Back

Gradient Fill

A beautiful gradient fill effect using SVG linearGradient

Gradient Fill
<svg viewBox="0 0 600 120" aria-label="Gradient fill">
    <defs>
        <linearGradient id="g1" x1="0" x2="1">
            <stop offset="0" stop-color="#ff7e5f"/>
            <stop offset="1" stop-color="#feb47b"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" fill="#ffffff" class="bg"/>
    <text x="50%" y="55%" text-anchor="middle" dominant-baseline="middle" font-size="44" fill="url(#g1)">Gradient Fill</text>
</svg>