Skip to content
Emberan
Notifications
Ravi Duarte sent a new order
4 days agoIsla Silva sent a new order
just nowLuna Morgan sent a new order
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.

Corporate cards
Available
Multi-currency wallets
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).

  • Invoicing
  • Business accounts
  • Corporate cards

7Watermark text

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

See every transaction in real time

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

8Muted icons

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

  • 395 Riverside Drive, Melbourne
  • +1 (555) 679-2394
  • ella.nguyen@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.

Money management made simple

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).

Basic account
Basic account
$28.31
Pro accountSold out
Pro account
$48.35

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. Smarter payments for growing companies
  2. Corporate cards with built-in controls
  3. Take control of your cash flow
  4. Get paid faster, pay out with ease
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.

Business banking without the paperwork

Accounting sync keeps your books up to date without manual exports.

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. Every detail is handled by people who care about getting it right.

* Your money is protected by bank-grade security and regulated partners.

19Overlay controls

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

How to choose the right account

20Avatar of inactive member

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

  • Diego Patel
  • Elena Tanaka (inactive)