SVG gradients let you display smooth transitions between two or more specified colors (like in CSS).
In this demo you can choose the gradient code from the list on the left (linear or radial) or write your own the code section. The chosen gradient is applied to the shapes/text as specified in the svg code. You can change the code (to add shapes, change gradient ...) to explore other possibilities.
You can define various gradients inside the <defs> section and then apply different gradient to each shape. Try to add other shapes. Try different spreadMethod values.
x1, y1:
The x1 and y1 (starting point) of the vector defining the direction of the gradient. Specified as percentages (%) of of the shape the gradient is applied to.
x2, y2:
The x2 and y2 (end point) of the vector defining the direction of the gradient.
spreadMethod:
This value defines how the gradient is spread out through the shapes:
pad means that the first/last color of the gradient is padded (spread out) before and after the gradient.
repeat means that the gradient is repeated throughout the shape.
reflect means that gradient is mirrored in the shape.
The spread method is only relevant if the gradient does not fill out the shape completely (see gradient vector x1, x2, y1, y2).
gradientTransform:
You can transform (e.g. rotate) the gradient before it is applied.
offset:
How far into the shape this color starts (if the first color of the gradient) or stops (if the last color of the gradient). Specified as percentages (%) of the shape (actually the gradient vector) the gradient is applied to. For instance, 10% means that the color should start / stop 10% into the shape.
stop-color:
The color of this stop-point. The color the gradient changes from / to.
stop-opacity:
The opacity of the color of this stop-point. If opacity changes from one stop-point with 1 to another stop-point with opacity 0, then the color will gradually become more and more transparent.
cx, cy, r:
The cx, cy, and r attributes define the outermost part of the circle for the gradient, where r is the radius of the gradient. The 100% stop-color of the gradient to follow will be mapped to the perimeter of this value. cx, cy defaults to 50% if omitted. An r value of “0” will result in the shape being painted as a single color defined by the last gradient stop.
fx, fy:
The x and y of the focal point of the radial gradient (innermost circle). If omitted, they will coincide with the presentational value of cx/cy.
spreadMethod:
This value defines how the gradient is spread out through the shapes:
pad means that the first/last color of the gradient is padded (spread out) before and after the gradient.
repeat means that the gradient is repeated throughout the shape.
reflect means that gradient is mirrored in the shape.
The spread method is only relevant if the gradient does not fill out the shape completely (see gradient vector x1, x2, y1, y2).
gradientTransform:
You can transform (e.g. rotate) the gradient before it is applied.
offset:
How far into the shape this color starts (if the first color of the gradient) or stops (if the last color of the gradient). Specified as percentages of the shape (really the gradient vector) the gradient is applied to. For instance, 10% means that the color should start / stop 10% into the shape.
stop-color:
The color of this stop-point. The color the gradient changes from / to.
stop-opacity:
The opacity of the color of this stop-point. If opacity changes from one stop-point with 1 to another stop-point with opacity 0, then the color will gradually become more and more transparent.