Skip to content
Fableova Co
Notifications
Luna Moreau joined the team
2 days agoFelix Mensah commented on your task
yesterdayAva Fischer sent a new order
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.

Career coaching
Available
Study groups
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).

  • Certificates
  • Certificates
  • Study groups

7Watermark text

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

Your next career starts here

Every course is built around hands-on projects you can add to your portfolio.

8Muted icons

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

  • 105 Maple Avenue, Valencia
  • +1 (555) 379-2572
  • nora.harlow@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.

Knowledge that moves you forward

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

UX fundamentals
UX fundamentals
$36.36
Data analysisSold out
Data analysis
$55.13

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. Short courses, real results
  2. Courses taught by real practitioners
  3. Master a new skill this season
  4. Learn from people who do the job
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.

Grow your career one lesson at a time

Career coaches help with your CV, portfolio and interview practice.

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.

Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.

* Learn on your schedule, with lessons that fit into a lunch break.

19Overlay controls

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

Headlines people actually click

20Avatar of inactive member

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

  • Mateo Lindqvist
  • Leo Mensah (inactive)