Blog

css3-alpha-transparent

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!

4 Comments

  • Peter 2 months ago Reply

    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. :)

  • Peter 2 months ago Reply

    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

    • nikki 2 months ago Reply

      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.

4 Comments

Submit a Comment