SVG gradients in CSS

On a recent project we were building a new home page hero widget and the design called for the user to be able to select from a set of themes to decide what colour the hero should be.

They do this by assigning a ‘Theme-xx’ tag to the content item, and then we apply a class to the hero based on the theme tag used. Simple enough, we have a BEM modifier class that switches out colours based on the chosen tag.

One part of the design however is an SVG background graphic that has a gradient running left to right. Instead of having multiple SVGs in the page that get shown or hidden based on a class, I wanted to see if there was a cleverer way to do it.

As you can see in the pen above I’ve got a hidden svg which simply contains several linearGradient tags, each with an id and two or more stop tags within it. These are where the colours for the gradients are defined. We can then use css to update the fill property of the path element based on an id of one of the linearGradient tags, and the gradient used gets updated.