Skip to content
Delta
Notifications
Ivy Ashford commented on your task
just nowFinn Okafor commented on your task
1 days agoLuna Morgan updated the report
just now
View all

Opacity

Opacity utilities set the transparency of a whole element, content included: opacity-100, -75, -50, -25 and -0. Use them for disabled looks, faded thumbnails or decoration; when only a background or border should fade, use bg-opacity-* or border-opacity-* instead.

1Opacity scale

opacity-100, -75, -50, -25 and -0 make the whole element, content included, more transparent - keep text out of strongly faded elements.

100
75
50
25
0

2Opacity versus bg-opacity

opacity-50 fades the text too, bg-opacity-50 fades only the background.

opacity-50
The text fades too - here below 4.5:1.
bg-opacity-50

3Disabled looking card

opacity-50 with pe-none shows an option that is not available yet.

Private events
Available
Wine pairing
Coming soon

4Faded image gallery

Non-selected thumbnails at opacity-50, the active one at full opacity.

Thumbnail 1 Thumbnail 2 Thumbnail 3

5Logo wall

Partner logos at opacity-50 look calm and uniform.

Partner logo Partner logo Partner logo Partner logo

6Completed tasks

Done items drop to opacity-75 and get a line through - still readable (opacity-50 text is below 4.5:1).

  • Wine pairing
  • Wine pairing
  • Takeaway

7Watermark text

Huge text at opacity-25 behind a heading as a decorative watermark (inert and aria-hidden: decoration has no contrast requirement).

Taste the city's favourite kitchen

Every detail is handled by people who care about getting it right.

8Muted icons

Decorative icons at opacity-75 or -50 next to labels.

  • 466 Maple Avenue, Kyoto
  • +1 (555) 679-1072
  • theo.morgan@example.com

9Inactive steps

Future steps of a progress indicator at opacity-50, marked aria-disabled until they can be reached.

1 Cart 2 Shipping 3 Payment 4 Review

10Hidden but taking space

opacity-0 keeps the layout slot, so neighbours do not move.

A
B
C

11Image tint over colour

An image at opacity-75 on a bg-primary parent picks up a brand tint.

Where every dinner feels like a celebration

12Secondary actions

Quiet actions next to the main one: a link-style button, and opacity-50 on an action that is not available (a disabled button).

13Out of stock products

The sold out item has its picture at opacity-50, a label and its text at opacity-75 (still readable).

Truffle pasta
Truffle pasta
$78.56
Grilled salmonSold out
Grilled salmon
$21.90

14Placeholder skeleton

Rows of bg-body-secondary at opacity-75 sketch content while it loads.

15Fading list

Older entries step down in opacity to suggest age.

  1. Good food brings people together
  2. Cooked with care, served with a smile
  3. Wood-fired, slow-cooked, unforgettable
  4. Dinner worth getting dressed up for
From opacity-50 down the entries are decoration - below 4.5:1, so link to the full history instead of fading what people must read.

16Background pattern dots

Large icons at opacity-25 placed in a corner decorate a banner.

Seasonal menus from local farms

Private dining rooms seat up to forty guests for birthdays and business dinners.

17Unavailable time slots

Booked slots are disabled buttons at opacity-25 among the free slots.

18Subdued footnote

A small footnote at opacity-75 below the main content.

Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.

* We keep things simple, so you can focus on what matters to you.

19Overlay controls

Controls on top of an image sit on a dark pill at reduced background opacity.

Planning the perfect birthday dinner

20Avatar of inactive member

Members who left the team are shown at opacity-75 - quieter, still readable.

  • Nora Larsen
  • Freya Alvarez (inactive)