CSS ‘transparent’ Keyword

The CSS transparent keyword can be used to make an HTML element transparent. For example, to set a transparent background.

The transparent keyword can be used anywhere a color value is accepted. This allows you to set items to transparent, so that any background element will show through.

For example, to set a transparent background, do this:

Note that transparent is the initial value for the background-color property, so you often won't need to specify this. However, sometimes you do need to explicitly set background to transparent.

For example, you will need to set an element to transparent if its background color is currently an opaque color (i.e. not transparent).

The following code demonstrates what I mean.

Doing this will make the background of all article elements beige. But if they've got the .glass class applied, their background will be transparent.

Here's a working example with a background pattern, to demonstrate the transparency.

<!DOCTYPE html>
<title>Example</title>
<style>
body {
   background: url('/pix/samples/bg2.png') beige;
 }
article { 
    background-color: gold;
    border: 5px solid darkorange;
    padding: 20px;
    margin: 20px;
    }
article.glass { 
    background-color: transparent;
    } 
</style>
<article>
<h1>Article 1</h1>
</article>

<article class="glass">
<h1>Article 2</h1>
</article>

RGBA Equivalent

The transparent keyword is the equivalent of rgba(0,0,0,0) which is its computed value.

So you can also use rgba(0,0,0,0) to achieve the same effect.

History of the `transparent` Keyword

The transparent keyword was first introduced in CSS1. However, CSS1 allowed it to be used for the background-color property only.

CSS2 allowed it to also be used on the border-color property.

CSS3 extended it further to allow the transparent keyword to be used with all properties that accept a color value.

CSS ‘transparent’ Keyword

RGBA Equivalent

History of the transparent Keyword

History of the `transparent` Keyword