# \<radialGradient>

[browser](../..) ⟩ [SVG](..) ⟩ [gradient]() ⟩ \<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](../../../css "mention") ⟩ [radial](../../../css/values/gradients/radial "mention")
{% endtab %}
{% endtabs %}
