SVG Gradients - Linear

An SVG Gradient must be defined within a <defs> tag.

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 main types of gradients in SVG:

• Linear Gradients
• Radial Gradients

Linear Gradients

The <linearGradient> tag is used to define an SVG linear gradient.

The <linearGradient> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as gradients.

Linear gradients can be defined as horizontal, vertical or angular gradients:

• Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ
• Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ
• Angular gradients are created when x1 and x2 differ and y1 and y2 differ

Copy the following code into Notepad and save the file as "linear1.svg". Place the file in your Web directory:

Code explanation:

• The id attribute of the <linearGradient> tag defines a unique name for the gradient
• The fill:url(#orange_red) property links the ellipse element to the gradient
• The x1, x2, y1,y2 attributes of the <linearGradient> tag define the starting and ending position of the gradient
• The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end

View example (Horizontal gradient)

Another example:

View example (Vertical gradient)

1,050,724 Sites built with Wix. Make your own!

Click here to design a Stunning Flash Website for Free

Wix is a revolutionary web design tool that provides anyone with the possibility to create professional and beautiful websites for free.

With e-commerce features, search engine visibility and many more professional tools, Wix is the ultimate solution for creating a spectacular site while saving tons of money.