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 */
    background:
        -moz-linear-gradient(  /* for firefox */
            center bottom,
            rgb(76,149,175) 5%,
            rgb(183,185,52) 95%
        );
    background: -webkit-gradient(  /* for chrome and safari */
        linear,
        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;
    background:
        -moz-linear-gradient(
            center bottom,
            rgba(76,149,175,0.1) 5%,
            rgba(183,185,52,0.9) 95%
        );
    background: -webkit-gradient(
        linear,
        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.

Enjoy!

Author
Nikki
Categories
Front End
Previous Post
Form Styling with CSS3
 Next Post
HTML5 Form Tutorial

Comments

  1. Peter says:

    Hi.
    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.
    Peter

    | Reply |

    • 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.

      | Reply |

  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. 🙂

    | Reply |