The <linearGradient> SVG element lets authors define linear gradients to fill or stroke graphical elements.
Usage context
| Categories | Gradient element |
|---|---|
| Permitted content | Any number of the following elements, in any order: Descriptive elements <animate>, <animateTransform>, <set>, <stop> |
Attributes
Global attributes
Specific attributes
DOM Interface
This element implements the SVGLinearGradientElement interface.
Example
<svg width="120" height="120" xmlns="https://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="green"/>
<stop offset="95%" stop-color="gold"/>
</linearGradient>
</defs>
<rect fill="url(#MyGradient)"
x="10" y="10" width="100" height="100"/>
</svg>
| Screenshot | Live sample |
|---|---|
 |
Specifications
| Specification | Status | Comment |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 The definition of '<linearGradient>' in that specification. |
Candidate Recommendation | |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<linearGradient>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | IE | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.5 (1.8) | 9.0 | 9.0 | 3.0.4[1] |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 3.0 | 1.0 (1.8) | No support | (Yes) | 3.0.4[1] |
The chart is based on these sources.
[1] WebKit doesn't support spreadMethod (WebKit bug 5968) and color interpolation (WebKit bug 6034).