Opacity
Opacity utilities adjust the visual transparency of an element and can be useful for secondary decoration or controlled visual emphasis.
Core concept
Explain opacity-25, opacity-50, opacity-75, and opacity-100. Clarify that lowering opacity affects the entire element, including its text and children, which can reduce readability.
Using it in a real interface
Use opacity for decorative overlays and secondary visual states rather than for primary content. Compare opacity with text color utilities when only text should appear muted.
Implementation notes
Do not use low opacity as the only way to communicate disabled or inactive state. Preserve sufficient contrast and provide a semantic state where one exists.
ADVERTISEMENT