Blog

Super easy and super useful. We’re talking about RGBa color values in CSS. They give you the ability to create great designs without having to use images. Instead of specifying color values in hex we can use the RGB value and also specify an alpha channel value.

An example of the RGBa syntax is as follows:

.modal_background {
    background: rgba(0, 0, 0, 0.5);
}

The first three values are the colors and the last is the alpha value. Its on a scale of 0-1 and accepts decimals such as 0.5 or 0.55.

Browser Support:

Blackberry: BBOS 6+
Android: 2.1 +
iOS: 3.2 +
IE: 9+
Other Desktop: Everything

As you can see almost any current browser with the exception of IE supports RGBa color values. This means we can use them without worrying about compatibility.

Here’s a little preview of some of the things you can do!

Heres the code for the examples above:

.dark{
    background: rgba(0, 0, 0, 0.75);
}
.lighter{
    background: rgba(0, 0, 0, 0.5);
}
. lighest {
    background: rgba(0, 0, 0, 0.25);
}

Add a comment if you have questions!