Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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:

Sorry, your browser does not support inline SVG.

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:

Sorry, your browser does not support inline SVG.

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:

            SVG Sorry, your browser does not support inline SVG.

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:

            Sorry, your browser does not support inline SVG.

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

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.