How to Apply Gradients to SVG Elements Using CSS?

Applying Gradients to SVG Elements Using CSS

Implementing a gradient on an SVG rect element requires utilizing CSS in conjunction with SVG's powerful gradient capabilities. The fill attribute of the rect element allows for gradient application.

To create a linear gradient, add the following CSS rule to your stylesheet:

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}

Now, within the SVG file, define the linear gradient using the and elements:

<defs>
    <linearGradient id="MyGradient">
        <stop offset="5%" stop-color="#F60" />
        <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
</defs>

Here, the gradient spans from #F60 at 5% to #FF6 at 95% along the element's length. You can adjust the colors and offset percentages to customize the gradient.

Finally, reference the gradient using the fill attribute in the rect element:

<rect width="100" height="50" fill="url(#MyGradient)"/>

This approach enables you to apply beautiful and dynamic gradients to your SVG elements using CSS, enhancing the visual appeal and user experience of your web applications.

The above is the detailed content of How to Apply Gradients to SVG Elements Using CSS?. For more information, please follow other related articles on the PHP Chinese website!