By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

RGBA Colors in CSS

Reference on RGBA Colors. Shows how to include the alpha channel in color declarations.

Edited: 2011-12-28 19:17

RGBA is a new feature of CSS that allow users to define RGBA Colors. The A in the declaration stands for Alpha. Unlike the RGB declaration, RGBA includes an Alpha channel.

RGBA Example

Below you will find a working live example of how RGBA works.

The below is not an image, you will only be able to see the transparency with an updated browser. The example consists of two div elements that are slightly overlapped, with a position set, z-index and RGBA color value applied.

The exact code used for the above example is shown below:

<div style="position: relative;z-index: 1;background: #FF7751;width: 150px;height: 150px;margin: 0 0 35px 1em;">
  <div style="position: absolute;z-index: 2;background: rgba(0,0,255,0.5);width: 150px;height: 150px;top: 25px;left: 25px;">

Brugbart Vision!

A value of 1 is fully opaque, in other words, you cant see trough the color. To make it half transparent, give it value of 0.5 instead.

See also

  1. Colors in HTML and CSS