CSS opacity Property

What You’ll Learn

The opacity property controls how see-through an element is. It is one of the easiest CSS tools for fades, overlays, and subtle visual effects.

Introduction

The opacity property in CSS is used to set the transparency level of an element. This property affects the entire element, including its content and background, making it useful for creating effects like overlays, fading elements in and out, and more.

The opacity value ranges from 0 to 1, where 0 represents full transparency and 1 represents full opacity (no transparency).

Definition and Usage

Use opacity when you want the whole box — background, border, text, and children — to become more or less visible together.

For a transparent background only, consider rgba() or hsla() instead so text stays fully readable.

📝 Syntax

The syntax for the opacity property is simple. You can apply it to any HTML element.

element {
  opacity: <number>;
}

Here, the value is a number between 0 and 1, indicating the transparency level.

Basic Example

p {
  opacity: 0.5;
}

Syntax Rules

• Use a number from 0 (invisible) to 1 (fully visible).
• Values outside 0–1 are clamped by the browser.
• opacity applies to the entire element, not just the background.
• It can be animated smoothly with transition or @keyframes.

🎯 Default Value

The default value of the opacity property is 1, which means the element is fully opaque and not transparent at all.

You only need to set opacity when you want something to appear faded or hidden visually.

💎 Property Values

Examples Gallery

From basic semi-transparent text to hover fades and overlay backdrops.

<style>
  p {
    opacity: 0.5;
  }
</style>

<h1>Paragraph with Reduced Opacity</h1>
<p>This paragraph is semi-transparent with 50% opacity.</p>

.btn {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.btn:hover {
  opacity: 0.7;
}

.overlay {
  position: absolute;
  inset: 0;
  background: #0f172a;
  opacity: 0.6;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.card {
  animation: fadeIn 1s ease forwards;
}

opacity vs rgba() and visibility

opacity fades the entire element. rgba() or hsla() can fade only the background color while keeping text at full strength.

opacity: 0 hides an element visually but it can still receive clicks unless you also use pointer-events: none. visibility: hidden also hides content but behaves differently in animations and interaction.

/* Whole box fades */
.panel-a { opacity: 0.5; }

/* Only background fades */
.panel-b { background: rgba(37, 99, 235, 0.5); }

♿ Accessibility

• Maintain contrast — Low opacity can make text hard to read. Check contrast ratios for important content.
• Do not hide essential info — Avoid relying on very faded text for instructions or labels.
• Respect reduced motion — Some users prefer fewer fade animations when prefers-reduced-motion: reduce is set.
• Hidden but clickable — Remember that opacity: 0 elements may still block clicks unless disabled.

💡 Best Practices