I was recently presented with an SVG from our design team that included colors I needed to make flexible between different projects. Since the SVG contained a linearGradient
with colors defined directly in the SVG, I knew I had to move those colors out of the SVG and into CSS. In this post, I walk you through my process of styling the SVG gradient stop-color
attribute with CSS and Custom Variables. I also look at an interesting discovery that I made with browser support and documentation regarding styling the CSS property stop-color
.
Using the Inline Stop-Color
Attribute
To create a gradient within an SVG, you use the linearGradient
or radialGradient
element, with a nested stop
element for each of the gradient “stops,” or gradient colors. Then you assign that gradient via an ID to the elements within the SVG that will get the gradient fill. stop-color
is an attribute on the stop
element and what I will be focusing on in this post. Let’s look at a simple example of a linear gradient for an SVG circle:
<svg width="72" height="72" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
<linearGradient x1="0" y1="0" x2="100%" y2="100%" id="gradient">
<stop stop-color="#c86dd7" offset="0"/>
<stop stop-color="#3023ae" offset="100%"/>
</linearGradient>
<circle fill="url(#gradient)" cx="36" cy="36" r="20"/>
</svg>
The above shows that the linearGradient
is created with a stop-color
of #c86dd7
at offset 0 and a stop-color
of #3023ae
at offset 100%. Then that gradient is used as a fill
in the circle
.
Using CSS Variables
I can see that stop-color
is each gradient color and the point at which it stops, or its offset. However, stop-color
is inline with the SVG and I wanted to make it more flexible. I accomplished that by removing the stop-color
attribute from the SVG, adding a class, then putting those into the CSS. Let’s look at an example:
HTML:
<svg width="72" height="72" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
<linearGradient x1="0" y1="0" x2="100%" y2="100%" id="gradient">
<stop class="gradient__brand-secondary" offset="0"/>
<stop class="gradient__brand" offset="100%"/>
</linearGradient>
<circle fill="url(#gradient)" cx="36" cy="36" r="20"/>
</svg>
CSS:
:root {
--color-brand: #3023ae;
--color-brand-secondary: #c86dd7;
}
.gradient__brand-secondary {
stop-color: var(--color-brand-secondary);
}
.gradient__brand {
stop-color: var(--color-brand);
}
That’s exactly what I was looking for. This made the gradient flexible and if the brand colors change, the gradient changes as well.
Browser Support
Lastly, browser support. This is where things got weird. This was my first use of stop-color
, so I wanted to make sure it was widely supported.
-
I checked caniuse but it found no results for a search of
stop-color
. -
MDN discusses
stop-color
but only related to the SVG attribute. -
An MDN sitewide search did not return any other documentation related to
stop-color
. -
W3C does not list
stop-color
as a CSS property.
Finally, I found this W3C document related to styling SVGs with CSS. This document explains why stop-color
works even though no one mentions it being a valid CSS property. The document says:
SVG user agents must support all of the CSS styling mechanisms described in this chapter.
And with that, I had my answer. It may not be an actual CSS property but it is a style mechanism described in the SVG styling documentation, so it must be supported if the browser supports SVGs.
IE11 Browser Exception
The last thing to note is that IE11 does not support CSS Variables (Custom Properties) but you can still use stop-color
in the CSS like we did in the CodePen examples. If you do use CSS Variables, be sure that you have a fallback or use a plugin that converts the CSS Variables into actual color values for this technique to be supported in IE11.
A fallback might look like this:
.gradient__brand-secondary {
stop-color: #c86dd7; /* fallback color */
stop-color: var(--color-brand-secondary);
}
.gradient__brand {
stop-color: #3023ae; /* fallback color */
stop-color: var(--color-brand);
}
At DockYard, the digital design project I am working on uses PostCSS. For IE11 support we use a PostCSS plugin called postcss-custom-properties that converts CSS Variables into color values for you.
In Conclusion
You can use the stop-color
property for your SVG gradients in CSS!
DockYard is a digital product agency offering exceptional user experience, design, full stack engineering, web app development, software, Ember, Elixir, and Phoenix services, consulting, and training.