Skip to content
Notifications
Mia Whitaker sent a new order
just nowFinn Quinn commented on your task
1 hours agoSofia Ortega commented on your task
yesterday
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.

Cooking classes
Available
Dine-in
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).

  • Cooking classes
  • Wine pairing
  • Wine pairing

7Watermark text

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

Seasonal menus from local farms

We have been feeding this neighbourhood for over a decade, and we still love it.

8Muted icons

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

  • 256 Maple Avenue, Edinburgh
  • +1 (555) 664-8950
  • ella.varga@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.

Cooked with care, served with a smile

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
$26.88
Grilled salmonSold out
Grilled salmon
$89.89

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. Where every dinner feels like a celebration
  2. Dinner worth getting dressed up for
  3. Good food brings people together
  4. Taste the city's favourite kitchen
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.

The neighbourhood kitchen everyone loves

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

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.

Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We listen first, then build a plan around what you actually need.

* Order for pickup or delivery and enjoy the same dishes at home.

19Overlay controls

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

Meet the farmers behind our menu

20Avatar of inactive member

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

  • Finn Tanaka
  • Diego Larsen (inactive)