opacity
Setting the opacity of an element.
Overview
| Class | Declarations |
|---|---|
opacity:<value> | opacity: <value>;
|
Examples
Fade an entire element
Opacity fades the element as a group, including its text and background. Both native disclosures remain keyboard operable; focus one and press Enter or Space.
<!-- Opaque · complete group --><details class="w:240px max-w:100%"> <summary id="target" class="p-md r-sm font-md bg-blue-60 fg-white opacity:1 cursor:pointer"> Preview details </summary> <p class="mb:0 mt-sm font-sm text-body"> The layer is ready for review. </p></details><!-- Half opacity · same interaction --><details class="w:240px max-w:100%"> <summary id="target" class="p-md r-sm font-md bg-blue-60 fg-white opacity:.5 cursor:pointer"> Preview details </summary> <p class="mb:0 mt-sm font-sm text-body"> The layer is ready for review. </p></details>Generated CSS
@layer utilities { .opacity\:\.5 { opacity: .5 }}Reduced opacity does not disable a control, remove its accessible name or take it out of layout. The revealed paragraph is a sibling of the faded summary, so it retains full opacity.
Prefer color alpha for surfaces
Compare whole-element opacity with alpha on just the background. Both begin with the same blue surface and foreground colors.
<!-- Group opacity · text also fades --><div id="target" class="w:240px max-w:100% p-md r-sm font-md bg-blue-5 fg-black opacity:.5"> Ready for review</div><!-- Background alpha · text stays opaque --><div id="target" class="w:240px max-w:100% p-md r-sm font-md bg-blue-5/.5 fg-black"> Ready for review</div>The second background is translucent, but its foreground stays at the authored color. Color alpha is useful when only a surface should reveal what is behind it.
Apply conditionally
Hover the label or focus its checkbox to reduce opacity. Space still toggles the native checkbox. Print restores full opacity.
<!-- Hover or focus · native checkbox remains active --><label id="target" class="inline-flex items-center gap-xs p-md b:1px|solid|var(--color-line-base) r-sm font-md bg-surface-base text-body opacity:1 opacity:.72:focus-within@screen opacity:1@print opacity:.72:hover@screen"> <input type="checkbox" name="preview" class="width:16px height:16px" /> <span>Show preview</span></label>The checkbox and label fade together. Do not use a faded appearance as the only indication of an unavailable action; use the control’s actual disabled state when it should be unavailable.