> 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/radial.md).

# \<radialGradient>

[browser](/web/browser.md) ⟩ [SVG](/web/browser/svg.md) ⟩ [gradient](/web/browser/svg/gradient.md) ⟩ \<radialGradient>

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

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

```markup
<svg viewBox="0 0 350 140" xmlns="http://www.w3.org/2000/svg">
	    
	  <!-- definitions -->
	  <defs>
        <!-- radial -->
        <radialGradient id="radial" cx="0.3" cy="0.3">
            <stop offset="10%" stop-color="yellow"/>
            <stop offset="95%" stop-color="green"/>
        </radialGradient> 
    </defs>
    
    <circle id="ball"
        cx="100" cy="70" r="50" 
        fill="url(#radial)"
        stroke="black"
    ></circle>
    
</svg>
```

{% endtab %}

{% tab title="📘 手冊" %}

* [radialGradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/radialGradient)
  {% endtab %}

{% tab title="👥 相關" %}

* [CSS](/web/css.md) ⟩ [radial-gradient()](/web/css/values/gradients/radial.md)
  {% endtab %}
  {% endtabs %}