CSS: Opacity

By Xah Lee. Date: . Last updated: .

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.

Reference

CSS Color Module Level 3

CSS Color Topic

  1. CSS Color Tutorial
  2. CSS Color Names
  3. CSS: HSL Color
  4. CSS: Opacity
  5. CSS: Linear Gradient
  6. CSS: Radial Gradient
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon