CSS: Opacity

By Xah Lee. Date: . Last updated: .

This page shows a example of using CSS's transparency/opacity feature.

You can specify transparency/opacity, as the 4th argument to “hsla” or “rgba”.

Syntax

css_selector {background-color:hsla(hue, saturation, lightness, opacity)}

or

css_selector {background-color:rgba(red, green, blue, opacity)}

0 ≤ opacity ≤ 1

Example

Here's text on top of a image. The text's background has increasingly higher opacity.

0.0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0

Here's the code:

<div style="background-image:url(i/ball_shadow.png);
width:640px; height:480px;
font-size:100px">
<span style="background-color:hsla(120, 100%, 50%, 0.0)">0.0</span>
<span style="background-color:hsla(120, 100%, 50%, 0.1)">0.1</span>
<span style="background-color:hsla(120, 100%, 50%, 0.2)">0.2</span>
<span style="background-color:hsla(120, 100%, 50%, 0.3)">0.3</span>
<span style="background-color:hsla(120, 100%, 50%, 0.4)">0.4</span>
<span style="background-color:hsla(120, 100%, 50%, 0.5)">0.5</span>
<span style="background-color:hsla(120, 100%, 50%, 0.6)">0.6</span>
<span style="background-color:hsla(120, 100%, 50%, 0.7)">0.7</span>
<span style="background-color:hsla(120, 100%, 50%, 0.8)">0.8</span>
<span style="background-color:hsla(120, 100%, 50%, 0.9)">0.9</span>
<span style="background-color:hsla(120, 100%, 50%, 1.0)">1.0</span>
</div>

This is supported in all browsers as of .

See also: CSS HSL Color Samples.

Reference

CSS Color Module Level 3

Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.