<linearGradient>

The <linearGradient> tag is used within an SVG to create linear gradients.

It allows you to blend multiple colors fluidly along a specified direction. Linear gradients are often used to create shading, highlights, or smooth transitions between colors.

Think of a <linearGradient> like a painting where the colors blend into each other, but always following a straight line. 😉

Structure and syntax of the <linearGradient> tag

Structure

Imagine you want to create a linear gradient that changes progressively from one color to another along a straight line.

You can control this line with the attributes x1, y1, x2, and y2 to ensure that the colors blend smoothly.

Basic example

Here is a simple example:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="gradientExample" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="blue" />
            <stop offset="100%" stop-color="red" />
        </linearGradient>
    </defs>

    <rect x="10" y="10" width="180" height="180" fill="url(#gradientExample)" />
</svg>

In this example:

• x1 and y1 define the starting point of the gradient (top left);
• x2 and y2 define the ending point of the gradient (top right);
• Two <stop> elements define the colors of the gradient (blue at the start and red at the end).

Here is our result:

Example with multiple colors

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="multiColorGradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="yellow" />
            <stop offset="50%" stop-color="green" />
            <stop offset="100%" stop-color="blue" />
        </linearGradient>
    </defs>

    <rect x="10" y="10" width="180" height="180" fill="url(#multiColorGradient)" />
</svg>

In this example, the gradient goes from yellow to green to blue.

Try it yourself:

Best practices for linear gradients

Linear gradients are an excellent tool to enrich your designs, but here are some tips for using them effectively:

• Use smooth color transitions: Abrupt changes in color can make your design look unnatural or disorganized. Ensure that the colors blend smoothly.
• Limit the number of colors: Too many colors in a gradient can make your design look busy. Two or three colors are usually sufficient to achieve a harmonious look.
• Test on different screen sizes: Ensure that your gradients look good on various screen sizes and resolutions. What looks good on a large screen might not look as good on a smaller screen.
• Avoid excessively large gradients: Very large gradients can make your design look unnatural or disorganized. Use gradients sparingly and ensure they complement your design.

Main attributes of <linearGradient>

Browser compatibility

The <linearGradient> tag is widely supported by all modern browsers: