SVG Linear Gradients
SVG Gradients
A gradient is a smooth transition from one color to another. In addition, several color transitions can be applied to the same element.
There are two types of gradients in SVG:
- Linear gradients - defined with
<linearGradient>
- Radial gradients - defined with
<radialGradient>
The gradient definitions are placed within the <defs>
or the <svg>
element. The <defs>
element is short for
"definitions", and contains definition of special elements (such as
gradients).
Each gradient must have an id
attribute which
identifies the gradient. The graphic/image then points to the gradient to use.
SVG Linear Gradient - <linearGradient>
The <linearGradient>
element is used to define a linear gradient
(a linear transition from one color to another, from one direction to another).
The <linearGradient>
element is often
nested within a <defs>
element.
Linear gradients can be defined as horizontal, vertical or angular gradients:
- Horizontal linear gradients (this is default) goes from left to right (where x1 and x2 differ and y1 and y2 are equal)
- Vertical linear gradients goes from top to bottom (where x1 and x2 are equal and y1 and y2 differ)
- Angular linear gradients are created when x1 and x2 differ and y1 and y2 differ
Horizontal Linear Gradient
An ellipse with a horizontal linear gradient that goes from yellow to red:
Here is the SVG code:
Example
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1"
x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85"
ry="55" fill="url(#grad1)" />
</svg>
Try it Yourself »
Code explanation:
- The
id
attribute of the<linearGradient>
element defines a unique name for the gradient - The
x1
,x2
,y1
,y2
attributes of the<linearGradient>
element define the x and y starting and ending points of the gradient - The colors of a gradient are defined with two or more
<stop>
elements - The
stop-color
attribute in<stop>
defines the color of the gradient stop - The
offset
attribute in<stop>
defines where the gradient stop is placed - The
fill
attribute of the<ellipse>
element points the element to the "grad1" gradient
Horizontal Linear Gradient
An ellipse with a horizontal linear gradient that goes from yellow to green to red:
Here is the SVG code:
Example
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad2" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" stop-color="yellow" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad2)"
/>
</svg>
Try it Yourself »
Vertical Linear Gradient
An ellipse with a vertical linear gradient that goes from yellow to red:
Here is the SVG code:
Example
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad3)" />
</svg>
Try it Yourself »
Horizontal Linear Gradient with Text
An ellipse with a horizontal linear gradient from yellow to red, and add a text inside the ellipse:
Here is the SVG code:
Example
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%"
stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad4)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50"
y="86">SVG</text>
</svg>
Try it Yourself »
Code explanation:
- The
<text>
element is used to add a text
Angular Linear Gradient
An ellipse with an angular linear gradient that goes from yellow to red:
Here is the SVG code:
Example
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad5" x1="0%" y1="100%" x2="100%" y2="0%">
<stop
offset="0%" stop-color="yellow" />
<stop offset="100%"
stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad5)" />
</svg>
Try it Yourself »
SVG <linearGradient> Attributes
Attribute | Description |
---|---|
id | Required. Defines a unique id for the <linearGradient> element |
x1 | The x position of the starting point of the vector gradient. Default is 0% |
x2 | The x position of the ending point of the vector gradient. Default is 100% |
y1 | The y position of the starting point of the vector gradient. Default is 0% |
y2 | The y position of the ending point of the vector gradient. Default is 0% |
spreadMethod | Defines the spread method of the gradient. Possible values: "pad", "reflect", "repeat". Default is "pad" |
href | Defines a reference to another <linearGradient> element that will be used as a template |
gradientUnits | Defines the coordinate system for x1, x2, y1, y2. Possible values: "userSpaceOnUse" and "objectBoundingBox". Default is "objectBoundingBox" |
gradientTransform | Defines additional transformation to the gradient coordinate system |