# \<linearGradient>

[browser](../..) ⟩ [SVG](..) ⟩ [gradient]() ⟩ \<linearGradient>

{% tabs %}
{% tab title="💈範例" %}
![linearGradient](https://5dce9acd-06c7-4bae-a863-4e108076e042.id.repl.co/svg/gradients.svg)

:floppy\_disk: [https://replit.com/@pegasusroe/svg-gradients](https://replit.com/@pegasusroe/svg-gradients#index.html)

```html
<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>
```
{% endtab %}

{% tab title="👥 相關" %}
* :point\_right: [SVG as background image](../examples/svg-as-bg-image)
{% endtab %}
{% endtabs %}
