📘<linearGradient>

browser ⟩ SVG ⟩ gradient ⟩ <linearGradient>

linearGradient

💾 https://replit.com/@pegasusroe/svg-gradients

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">

    <defs>
        <!-- linear gradient -->
        <linearGradient id="darkerDown" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#ccc"/>
            <stop offset="100%" stop-color="#333"/>
        </linearGradient> 
    </defs>

    <!-- ⭐️ fill="url(#darkerDown)" -->
    <rect x="0" y="0" width="10" height="10" fill="url(#darkerDown)"/>

</svg>
PreviousgradientsNext<radialGradient>

Last updated