Opacity

Definition

Utilities for controlling the opacity (transparency) of an element.

Explain Like I'm New

Ghost mode. `opacity-100` is fully solid. `opacity-50` is half invisible. `opacity-0` is completely invisible.

Real World Example

Fading out a 'Submit' button by applying `opacity-50` while an API request is loading, so the user knows it is temporarily disabled.

Common Use Cases

•Disabled states
•Modal backdrops
•Hover effects

Interactive Example

Interview Questions

basic

What is the difference between `opacity-0` and `hidden`?

intermediate

If you apply `opacity-50` to a parent `div`, what happens to the child `div` inside it?

Flash Cards

Question

opacity-0 vs hidden?

Click to reveal answer

Answer

`hidden` deletes the element from the layout. `opacity-0` keeps the element in the exact same spot (it still takes up space), you just can't see it.

Question

Parent opacity?

Click to reveal answer

Answer

The child ALSO becomes 50% transparent! Opacity is inherited. If you only wanted the parent background to be transparent, you should use `bg-opacity-50` or `bg-black/50` instead of `opacity-50`.