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!

No related posts.