> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/svg/gradient/linear.md).

# \<linearGradient>

[browser](/web/browser.md) ⟩ [SVG](/web/browser/svg.md) ⟩ [gradient](/web/browser/svg/gradient.md) ⟩ \<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](/web/browser/svg/examples/svg-as-bg-image.md)
  {% endtab %}
  {% endtabs %}