The <linearGradient> SVG element lets authors define linear gradients to fill or stroke graphical elements.

Usage context

CategoriesGradient element
Permitted contentAny 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="http://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>

ScreenshotLive 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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes1.5993.1
gradientTransform ? ? ? ? ? ?
gradientUnits ? ? ? ? ? ?
spreadMethod ? ? ? ? ? ?
x1 ? ? ? ? ? ?
x2 ? ? ? ? ? ?
xlink:href ? ? ? ? ? ?
y1 ? ? ? ? ? ?
y2 ? ? ? ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support31 Yes4 Yes3.1 ?
gradientTransform ? ? ? ? ? ? ?
gradientUnits ? ? ? ? ? ? ?
spreadMethod ? ? ? ? ? ? ?
x1 ? ? ? ? ? ? ?
x2 ? ? ? ? ? ? ?
xlink:href ? ? ? ? ? ? ?
y1 ? ? ? ? ? ? ?
y2 ? ? ? ? ? ? ?

See also

Document Tags and Contributors

Contributors to this page: fscholz, abbycar, Sebastianz, kscarfone, Jeremie, Manuel_Strehl, Sheppy
Last updated by: fscholz,