SVG Radial-Gradient

Radial gradient is used to apply collection of colors on a single shape or object in circular formate.

Syntax

<radialGradient id="idName">
<stop offset="value" stop-color="color" />
<stop offset="value" stop-color="color" />
</radialGradient>

You can use any number of stop colors in stop element.

You can use SVG linear gradient any where within an HTML document.

Practice Task

Open notepad or any other text editor, follow the following points.

• Use <svg> element to draw svg any shape or line on webpage
• Give width and height of 300 300 respectivelly to SVG element
• Apply linear gradient to svg shape or line

save file with name task.html or task.htm and then open it using any browser and see results.

SVG Code Generators

Try our SVG generators to practice and generate SVG code in real time.