CSS Opacity

Last reviewed May 28, 2026 Content v20260528

This lesson

This lesson teaches CSS Opacity—the ideas, syntax, and habits you need before moving on in CSS.

Without a solid grasp of CSS Opacity, you will repeat mistakes in CSS exercises and on real pages or scripts.

You will apply CSS Opacity in contexts like: All browser UIs, component libraries, marketing sites, and many native apps that reuse web views.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When intermediate lessons feel comfortable and you are ready for production-style trade-offs.

opacity changes transparency of an element and all its descendants as a single composited unit.

Use subtle opacity for decorative layers.
Prefer alpha colors (rgba/hsl / alpha) when only background needs transparency.
Avoid reducing contrast of essential text.

Applying opacity to parent fades child text/icons too, which can harm readability.

Q: Opacity vs RGBA background?
A: Opacity affects whole element subtree; RGBA can target specific painted property.
Q: Why can disabled UI using low opacity be problematic?
A: It may violate contrast and reduce clarity for low-vision users.
Q: Recommended hover fade approach?
A: Animate opacity modestly and keep text contrast acceptable.

Pitfall: Check cascade order—author stylesheet loses to inline styles and !important surprises.

Can you explain this lesson in 30 seconds without reading notes?

Self-reflection (saved on this device)

Not saved yet.

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Multiple choice — immediate feedback.

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

No discussion yet. Be the first to ask a question.

Jump