CSS3 Alpha Transparent Gradients

In CSS3 you can create a gradient background with multiple color stops.  But did you know that you could throw alpha transparency into the mix? This is an example of the CSS used to create a blue-green linear gradient:

.gradient {
    background: #4C95AF;  /* for IE */
        -moz-linear-gradient(  /* for firefox */
            center bottom,
            rgb(76,149,175) 5%,
            rgb(183,185,52) 95%
    background: -webkit-gradient(  /* for chrome and safari */
        left bottom,
        left top,
        color-stop(0.05, rgb(76,149,175)),
        color-stop(0.95, rgb(183,185,52))


This will result in:

The colour stops are defined using the rgb format. Watch what happens when we add alpha to the end of the color stop declarations.

.gradient {
    background: #4C95AF;
            center bottom,
            rgba(76,149,175,0.1) 5%,
            rgba(183,185,52,0.9) 95%
    background: -webkit-gradient(
        left bottom,
        left top,
        color-stop(0.05, rgba(76,149,175,0.1)),
        color-stop(0.95, rgba(183,185,52,0.9))

You can inspect these divs with a developer tool, they’re not images!

This opens up a whole new dimension of transparency in your designs. Imagine what you could do with a few more colour stops, changing the angle of the gradient, or using a radial gradient instead of a linear one! Please note: this technique is not supported in Internet Explorer or Opera. It is possible to use Microsoft’s filter mechanism to create a transparent gradient, but it’s not recommended (more information). A more practical solution would be to create a fallback based on 24 bit PNGs, and then convert the images into data URIs to negate the need for an extra http request.



  1. Peter says:

    This is an excellent feature. I can see that this post is almost 3 years old. Do you know if there has been any progress with Opera?

    I’d love you to do a quick How To with the coding needed for wordpress (if you have time). This, apart from being a really cool feature, seems like an excellent performance optimisation nearly everyone could benefit from.

    Thanks for the info.

    • nikki says:

      Hi Peter,

      Honestly, I don’t know if there’s been any progress with Opera – but I think they mentioned they were changing their rendering engine to WebKit a while back, so perhaps in a future update? Something for me to look into 🙂

      What specifically did you want to know about WordPress? I’m looking for some topics to write on, but I never know what to write about, so I’m always happy to receive suggestions.

  2. Peter says:

    Well, in relation to WordPress … I’m trying to find some optimisations for my site(s).
    This post about CSS Gradients was something I didn’t even know I could use CSS for. Excellent stuff: It saves a http call and some bandwidth and theoretically provides for a better rendering experience on the visitors end and a faster load time too. I love it.

    Currently I use a png gradient for some of the bling that appears on my site(s), but I think that repeating the small png may negatively impact on the user experience whilst someone is scrolling down the page. I believe it is the rendering of the png gradient that results in a jerky scroll. I’m looking for a smooth fluid scroll as you move down the page.

    Well, HEY PRESTO = Enter your CSS Gradient again. 🙂

    The only thing I am worried about is cross browser compatibility. They (all the browsers) still seem to be using different standards.
    I know most people use Firefox or I.E. but, I use Opera and have done so for years – and not about to change.

    Unfortunately, as appealing as it is, the form exercise doesn’t render correctly in Opera. It does in the other major browsers. I was wanting to lift you code for a form on my sight. In the name of ‘speed’ and security I am trying to dispense with some of the WordPress plugins I currently use.

    What browser do you use? Mozilla? I.E? or both? Chrome? I guess you test in all the browsers before signing off on client work.

    SO, as to tips to publish? WordPress CSS customisation is a great one. I use the Suffusion theme and there is a spot in the back end settings to insert custom CSS. I have itchy fingers to try out some custom code. HEY PRESTO = enter you background gradient. I just have to find some time to do it now. 🙂