Skip to content
Sageis Flow
Theme mode
Notifications
Nora Nguyen joined the team
24 min agoTariq Sato updated the report
3 days agoElena Moreau joined the team
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.

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

  • Speaker management
  • Ticketing
  • Ticketing

7Watermark text

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

The event your calendar has been waiting for

Thousands of attendees already trust us, and we work hard to keep it that way.

8Muted icons

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

  • 348 Hillcrest Road, Edinburgh
  • +1 (555) 636-4151
  • owen.kim@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.

Ideas on stage, connections everywhere

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

Early bird pass
Early bird pass
$39.54
Full access passSold out
Full access pass
$66.00

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. Learn from the best, meet the rest
  2. Talks, workshops and new friendships
  3. Be in the room where it happens
  4. Big ideas, small rooms, real conversations
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.

Three days that change how you work

Our evening party is the best place to turn talks into friendships.

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.

Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need.

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

19Overlay controls

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

What makes a panel worth watching

20Avatar of inactive member

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

  • Aria Novak
  • Liam Patel (inactive)