Skip to content

CSS SVG Gradients with Transparency

by Matthew on February 5th, 2013
CSS3 Logo

So there I was, starting on a new side project when I hit a wall, which should not have happened (see why near the end). The mock up in Illustrator called for a button that had a gradient background, but was also semi-transparent. I like to use Microsoft’s SVG Gradient Background Maker¬†when I want to use CSS gradients. It eliminates the need of a graphic and works in IE9+, Chrome, Safari and Opera, but oddly not Firefox. Unfortunately, this gradient generator does not allow you to define the opacity level, and so you’re stuck with fully opaque colors. Here’s the default example’s SVG code:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<linearGradient id="g660" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%">
<stop stop-color="#FFFFFF" offset="0"/>
<stop stop-color="#E3A820" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="1" height="1" fill="url(#g660)" />
</svg>

The neat thing about the SVG approach is that text is base64 encoded and can be included in your CSS file, but again, it’s missing the semi-transparency that I needed for my project. The solution is to add a stop-opacity attribute to <stop>, whose values range from 0.0 to 1.0, then base64 encode the SVG XML:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<linearGradient id="g660" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%">
<stop stop-opacity=".3" stop-color="#FFFFFF" offset="0"/>
<stop stop-opacity=".3" stop-color="#E3A820" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="1" height="1" fill="url(#g660)" />
</svg>

There are plenty of base64 encoders/decoders, so pick your favorite. The above XML could be thrown into an SVG file and referenced like an image, and using the base64 encode approach adds a lot of characters to your CSS, and if you have a lot of them, the file size could get bloated, if you will. Conversely, you won’t be making your visitors download another image or increase the size of a image sprite. It really comes down to personal preference.

I spent about 20 to 30 minutes trying to figure out this solution when I had the “answer” in front of me the whole time with the Ultimate CSS Gradient Generator. With this tool, you can create CSS gradients for all browsers that can support gradients in some fashion, while also giving you the option to specify the opacity. Decoding the SVG version would have shown me the XML attribute stop-opacity, and saved me a little bit of time.

I like to think that my googling skills don’t suck, but it took me a while to actually learn there was a stop-opacity attribute. My impatience probably got the better of me and I simply missed the answer. Unfortunately, I went with an image based solution because there was a small semi-transparent rounded border, which stopped when it reached the top, and browsers are can’t quite render buttons that rival ones created in photo editors.

From → Blog

2 Comments
  1. Justin Kempton permalink

    In my google travels I have found this website handy:
    http://www.colorzilla.com/gradient-editor/

    if you look there is a setting for gradients with rgba. IE9 does rely on SVG, but it’s the only browser that does I believe.

    Thank you for autotab_magic !!! Great code and documentation.

    • Matthew permalink

      Yeah, I noticed it after I discovered the stop-opacity attribute. Other browsers support the SVG method, but I believe you’re correct in that IE9 is the only one that relies on it.

      And thanks! I had a goal of getting Autotab 1.2 out before the new year but haven’t touched it in months due to a number of things. I’m itching to get it out there because what I’ve already updated is better than 1.1b. Hopefully I can set a night aside and get it knocked out.

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS