Loading...

CSS Opacity

You can paint solids, photos, and gradients. Sometimes you need the whole element to look softer — a muted overlay, a disabled button, a card that steps back. That is the job of opacity: how solid or see-through the entire box appears.

What does opacity do?

The opacity property sets how opaque an element is. The value runs from 1 (fully solid, the default for most elements) down to 0 (fully invisible). Decimal values like 0.5 sit in between. Importantly, opacity applies to the element and everything inside it — text, borders, backgrounds, and child boxes all fade together.

Opacity vs color alpha

These two ideas are easy to mix up. Keep them separate.

📊 Opacity vs color alpha

Tool What fades Typical use
opacity The whole element (and its children) Soft overlays, disabled look, fade-in motion later
rgba() / hsla() alpha Only that color layer Transparent backgrounds with solid text on top
transparent keyword A fully clear color value Hiding a border color without removing the property
visibility: hidden Hides visually but keeps layout Different tool — not covered in depth here

Fully solid and half faded

Start by comparing 1 and 0.5 on the same card design.

Solid vs half opacity

css
CSS Code 
.card-solid {
opacity: 1;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}

.card-soft {
opacity: 0.5;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}

What you should notice

On .card-soft, both the background and the text look washed out. Opacity does not spare the letters.

Children fade with the parent

If a parent has opacity: 0.4, nested headings and buttons cannot “opt out” by setting their own opacity: 1. They are already painted inside a faded layer.

Parent opacity washes children

css
CSS Code 
.overlay {
opacity: 0.4;
background-color: #0f172a;
color: white;
padding: 1rem;
}

.overlay strong {
opacity: 1; /* cannot restore full strength inside a faded parent */
}

Design implication

Need a frosted panel with crisp text? Fade the background color with rgba, not the whole element with opacity.

Prefer rgba when only the fill should soften

Here the panel background is translucent, but the text stays solid at full strength.

Soft fill, solid text

css
CSS Code 
.panel {
background-color: rgba(15, 118, 110, 0.25);
color: #042f2e; /* full strength text */
padding: 1rem;
}

Muted UI habit

A common pattern: slightly lower opacity on secondary actions or disabled controls so they feel quieter — still keep contrast readable.

Muted secondary button

css
CSS Code 
.btn-secondary {
opacity: 0.75;
background-color: #e2e8f0;
color: #0f172a;
border: none;
padding: 0.5rem 1rem;
}

Zero is invisible — space may remain

opacity: 0 makes the element invisible, but it can still occupy layout space and may still receive pointer events depending on context. If you need it gone from the layout, that is a different tool (display: none), not opacity alone.

Invisible but still in the flow

css
CSS Code 
.ghost {
opacity: 0;
}

Try it yourself

  1. Build two cards with the same colors; set one to opacity: 1 and one to opacity: 0.5.
  2. Nest a bold line inside an opacity: 0.4 parent — confirm you cannot fully “unfade” the child.
  3. Rebuild the soft look with background-color: rgba(…, 0.25) and solid color text.
  4. Style a secondary button at opacity: 0.75 and check readability.
  5. Optional: set opacity: 0 on a box and notice the gap it still leaves in the layout.

Common mistakes

  • Putting opacity on a parent when you only wanted a transparent background
  • Expecting a child with opacity: 1 to look fully solid inside a faded parent
  • Using opacity: 0 as a substitute for removing layout space
  • Dropping opacity so low that text fails contrast
  • Confusing the transparent color keyword with the opacity property

Summary

  • opacity sets how see-through the whole element is (0–1)
  • Children fade with their parent — you cannot fully override that from inside
  • For soft backgrounds with solid text, prefer rgba / hsla alpha
  • Low opacity can mute UI; keep accessibility in mind
  • Invisible (0) is not the same as removed from the layout
  • Practice the card pair and the rgba rebuild until the difference feels obvious

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Css Tutorial