CSS Opacity

The opacity of an element defines its transparency.

It determines how much of the background is visible through the element.

Opacity values range from 0 - 1 (transparent - opaque).

Example

#

Two images: one normal, and the other with opacity.

<img src="/img/css/montmartre-sm.jpg"
     style="margin: 10px;" />

<img src="/img/css/montmartre-sm.jpg"
     style="margin: 10px; opacity: .5;" />

Using opacity

The opacity property sets the transparency of an element.

Its value ranges from 0 (transparent) to 1 (opaque).

Also accepted are percentages from 0% (transparent) to 100% (opaque.

Four images with different opacity values.

<img src="/img/css/montmartre-sm.jpg"
     style="margin: 10px; opacity: 95%;" />

<img src="/img/css/montmartre-sm.jpg"
     style="margin: 10px; opacity: 70%;" />

<img src="/img/css/montmartre-sm.jpg"
     style="margin: 10px; opacity: 40%;" />

<img src="/img/css/montmartre-sm.jpg"
     style="margin: 10px; opacity: 10%;" />

Transitioning opacity

The transition property animates property values.

A transition can also smoothly change an element's opacity.

Hovering over the image changes its opacity.

<style>
  .transition {
    opacity: 50%;
    transition: 0.3s ease;
    cursor: pointer;
  }

  .transition:hover {
    opacity: 100%;
  }
</style>

<img src="/img/css/montmartre-sm.jpg"
     class="transition" />

The opacity filter

The filter property is used to add effects to images.

This property also accepts opacity values.

A filtered image using opacity.

<img src="/img/css/montmartre-sm.jpg"
     style="filter:opacity(30%);" />

Opacity with RGBA

Another way to control opacity is with RGBA color values.

RGBA stands for Red, Green, Blue, Alpha, where Alpha is the transparency level.

The Alpha value ranges from 0 (opaque) to 1 (transparent).

The inner element has a white background with Alpha set to 0.5.

This inside element is white with a 50% transparency
<style>
  .foundation {
    background-color: navy;
    padding: 15px;
  }

  .rgba {
    background: rgba(255, 255, 255, 0.5);
    color: white;
    padding: 15px;
  }
</style>

<div class="foundation">
  <div class="rgba">
    This inside element is white
    with a 50% transparency
  </div>
</div>

You may also like

Guides