Skip to content
Yaraen Craft
Notifications
Aria Ibrahim joined the team
48 min agoNadia Kowalski commented on your task
4 hours agoMason Alvarez updated the report
4 hours ago
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.

Secure file sharing
Available
API integrations
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).

  • API integrations
  • Workflow automation
  • Single sign-on

7Watermark text

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

Fewer meetings, more finished work

Granular roles keep sensitive work private while everyone else stays informed.

8Muted icons

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

  • 437 Willow Way, Barcelona
  • +1 (555) 174-4176
  • priya.novak@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.

Turn scattered tasks into a clear plan

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

Starter plan
Starter plan
$76.43
Team planSold out
Team plan
$73.31

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. The calm way to run a busy team
  2. Your whole team, finally in sync
  3. From idea to release, without the chaos
  4. One platform for every workflow
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.

Plan, build and launch in one place

Clear reports turn weekly numbers into decisions in minutes, not days.

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.

Your data is encrypted, backed up daily and hosted in the region you choose. Friendly people answer your questions quickly, by phone, chat or email.

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

19Overlay controls

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

The real cost of switching between tools

20Avatar of inactive member

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

  • Felix Silva
  • Aria Carter (inactive)