CSS Opacity

Imagine holding a glass window pane. If the glass is clean, you can see right through it to the garden outside (fully transparent). If you spray a layer of frosting on the glass, the view becomes blurry and hazy (semi-transparent). If you paint the glass solid black, it blocks the view completely (fully opaque). CSS opacity is that frosting spray. It controls the transparency level of your elements, letting you choose how much of the background content peeks through.

In this page:

The Opacity Scale
Interactive Hover Transitions
Opacity vs. RGBA Transparency
Opacity vs. visibility: hidden
Opacity in Layered Backdrops

The Opacity Scale

The opacity property sets the transparency level of an element. It accepts decimal values on a scale from 0.0 (completely transparent and invisible) to 1.0 (fully opaque and solid). Changing an element's opacity affects the element and all of its nested children.

Note: Use opacity changes to create smooth hover transitions and animations on your links or buttons.

Warning: Lowering an element's opacity makes all its nested children transparent as well, which can make text unreadable.

Example: The Opacity Scale

css

<style>
.faint {
  background: seagreen;
  color: white;
  padding: 10px;
  opacity: 0.3;
}
.solid {
  background: seagreen;
  color: white;
  padding: 10px;
  opacity: 1;
}
</style>
<div class="faint">30% opacity</div>
<div class="solid">Fully opaque</div>

Interactive Hover Transitions

You can use opacity to create elegant, responsive hover transitions on your buttons, links, or cards. By dimming the element slightly in its normal state and restoring full opacity on hover, you let users know that the element is interactive.

Note: Combine opacity changes with the CSS transition property to create smooth, polished hover animations.

Warning: Make sure your dimmed elements still have enough color contrast to be easily readable.

Example: Interactive Hover Transitions

css

<style>
.btn {
  opacity: 0.7;
  transition: opacity 0.2s;
}
.btn:hover {
  opacity: 1;
}
</style>
<button class="btn">Hover me</button>

Opacity vs. RGBA Transparency

If you want to create a semi-transparent container background (like an overlay) but want its nested child elements (like titles or text) to remain solid and opaque, do not use the opacity property. Instead, use an RGBA color value for your background-color property.

Note: Use RGBA background-color rules to create semi-transparent overlay boxes without affecting nested text readability.

Warning: The opacity property affects the element and all of its nested children, making it poor for styling text containers.

Example: Opacity vs. RGBA Transparency

css

<style>
.opacity-box {
  background: seagreen;
  color: white;
  padding: 10px;
  opacity: 0.5;
}
.rgba-box {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
}
</style>
<div class="opacity-box">Text is also faded</div>
<div class="rgba-box">Text stays fully readable</div>

Opacity vs. visibility: hidden

If you want to hide an element on your page completely, you can set its opacity to 0 or use the visibility: hidden property. While both make the element invisible, the element still occupies its original layout space in the document flow, unlike setting display: none.

Note: Use opacity: 0 to hide an element that you want to fade into view smoothly later using JavaScript.

Warning: Invisible elements with opacity: 0 are still clickable by users on the screen unless you also set pointer-events: none.

Example: Opacity vs. visibility: hidden

css

<style>
.opacity-hidden {
  opacity: 0;
}
</style>
<p>Before</p>
<p class="opacity-hidden">Invisible, but still takes up space and is clickable</p>
<p>After</p>

Opacity in Layered Backdrops

You can use opacity rules to build beautiful layered backdrops and complex image textures, blending background assets with foreground layers cleanly.

Note: Fade secondary backdrop containers slightly to make your primary card typography pop.

Warning: High transparency on primary cards can violate accessibility contrast guidelines.

Example: Opacity in Layered Backdrops

css

<style>
.backdrop {
  opacity: 0.6;
}
.card {
  position: relative;
}
</style>
<div class="card">
  <img class="backdrop" src="https://placehold.co/300x150" alt="Faded backdrop">
  <p>Foreground text pops</p>
</div>

Common Mistakes

Using the opacity property to make background colors transparent, which accidentally makes all nested text unreadably transparent.
Attempting to click links or buttons that are invisible (opacity: 0) but still active on the screen.
Lowering card opacity so much that it violates standard web accessibility contrast thresholds.

Chapter Summary

The opacity property sets the transparency level of an element on a scale from 0.0 to 1.0.
Opacity affects the element and all of its nested children, making it poor for text container backgrounds.
To create transparent container backgrounds with solid, readable text, use RGBA or HSLA color values instead.

Browser Support

The opacity property and standard RGBA color systems are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Pseudo-elements Next Lesson → CSS Navigation Bar