linearGradient lets authors define linear gradients to fill or stroke graphical elements.
<!DOCTYPE HTML> <html> <head> <title>SVG tutorial</title> </head> <body> <svg width="120" height="120"> <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> </body> </html>