Convert text to SVG paths quickly and easily

Back

Chrome Effect

Chrome-like effect with multiple gradients

Chrome Chrome
<svg viewBox="0 0 600 120">
    <defs>
        <linearGradient id="c1" x1="0" x2="1">
            <stop offset="0" stop-color="#e6eef8"/>
            <stop offset="1" stop-color="#9fb0d6"/>
        </linearGradient>
        <linearGradient id="c2" x1="0" x2="1">
            <stop offset="0" stop-color="#fff" stop-opacity="0.5"/>
            <stop offset="1" stop-color="#000" stop-opacity="0.1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" fill="#ffffff"/>
    <text x="50%" y="55%" font-size="44" text-anchor="middle" fill="url(#c1)" stroke="#b6c4e0" stroke-width="1">Chrome</text>
    <text x="50%" y="55%" font-size="44" text-anchor="middle" fill="url(#c2)" opacity="0.25">Chrome</text>
</svg>