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.

100

75

50

25

0

<div class="flex flex-wrap gap-2">
  <div class="bg-primary text-white rounded-lg p-4 opacity-100">
    <code class="small">100</code>
  </div>
  <div class="bg-primary text-white rounded-lg p-4 opacity-75">
    <code class="small">75</code>
  </div>
  <div class="bg-primary text-white rounded-lg p-4 opacity-50">
    <code class="small">50</code>
  </div>
  <div class="bg-primary text-white rounded-lg p-4 opacity-25">
    <code class="small">25</code>
  </div>
  <div class="bg-primary text-white rounded-lg p-4 opacity-0 border">
    <code class="small">0</code>
  </div>
</div>

2Opacity versus bg-opacity

opacity-50 fades the text too, bg-opacity-50 fades only the background.

opacity-50

bg-opacity-50

<div class="row g-2">
  <div class="col-sm-6">
    <div class="bg-success text-white rounded-lg p-4 opacity-50 font-semibold">
      opacity-50
    </div>
  </div>
  <div class="col-sm-6">
    <div class="bg-success/50 rounded-lg p-4 font-semibold">
      bg-opacity-50
    </div>
  </div>
</div>

3Disabled looking card

opacity-50 with pe-none shows an option that is not available yet.

Telehealth

Available

Dental care

Coming soon

<div class="row g-2">
  <div class="col-sm-6">
    <div class="border rounded-lg p-4">
      <div class="font-semibold">
        Telehealth
      </div>
      <div class="small text-muted">
        Available
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="border rounded-lg p-4 opacity-50 pointer-events-none" aria-disabled="true">
      <div class="font-semibold">
        Dental care
      </div>
      <div class="small text-muted">
        Coming soon
      </div>
    </div>
  </div>
</div>

4Faded image gallery

Non-selected thumbnails at opacity-50, the active one at full opacity.

<div class="flex gap-2">
  <img src="../assets/img/square-1.svg" alt="Thumbnail 1" width="80" height="80" class="rounded-lg object-cover border border-2 border-primary"> <img src="../assets/img/square-2.svg" alt="Thumbnail 2" width="80" height="80" class="rounded-lg object-cover opacity-50"> <img src="../assets/img/square-3.svg" alt="Thumbnail 3" width="80" height="80" class="rounded-lg object-cover opacity-50"> 
</div>

5Logo wall

Partner logos at opacity-50 look calm and uniform.

<div class="flex flex-wrap justify-center items-center gap-6">
  <img src="../assets/img/logo-1.svg" alt="Partner logo" width="120" class="opacity-50"> <img src="../assets/img/logo-2.svg" alt="Partner logo" width="120" class="opacity-50"> <img src="../assets/img/logo-3.svg" alt="Partner logo" width="120" class="opacity-50"> <img src="../assets/img/logo-4.svg" alt="Partner logo" width="120" class="opacity-50"> 
</div>

6Completed tasks

Done items drop to opacity-50 and get a line through.

Dental care
Lab tests
Lab tests

<ul class="list-unstyled mb-0 grid gap-2">
  <li class="opacity-50 line-through"><i class="bi bi-check-square" aria-hidden="true"></i> Dental care</li>
  <li class="opacity-50 line-through"><i class="bi bi-check-square" aria-hidden="true"></i> Lab tests</li>
  <li><i class="bi bi-square" aria-hidden="true"></i> Lab tests</li>
</ul>

7Watermark text

Huge text at opacity-25 behind a heading as a decorative watermark.

Modern healthcare close to home

This flexible release shows every detail in view with friendly support.

<div class="relative overflow-hidden rounded-xl bg-surface-3 p-6">
  <div class="absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 display-1 font-bold text-primary opacity-25 whitespace-nowrap pointer-events-none" aria-hidden="true">
    2017
  </div>
  <h3 class="relative h5 font-semibold mb-1">Modern healthcare close to home</h3>
  <p class="relative small mb-0">This flexible release shows every detail in view with friendly support.</p>
</div>

8Muted icons

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

233 Hillcrest Road, Oslo
+1 (555) 529-3563
ruby.silva@example.com

<ul class="list-unstyled mb-0 grid gap-2">
  <li><span class="opacity-50 me-2"><i class="bi bi-geo-alt" aria-hidden="true"></i></span>233 Hillcrest Road, Oslo</li>
  <li><span class="opacity-50 me-2"><i class="bi bi-telephone" aria-hidden="true"></i></span>+1 (555) 529-3563</li>
  <li><span class="opacity-50 me-2"><i class="bi bi-envelope" aria-hidden="true"></i></span>ruby.silva@example.com</li>
</ul>

9Inactive steps

Future steps of a progress indicator at opacity-50.

1 Cart 2 Shipping 3 Payment 4 Review

<div class="flex flex-wrap gap-4 small font-medium">
  <span class="flex items-center gap-1"><span class="badge rounded-full text-bg-success">1</span> Cart</span> <span class="flex items-center gap-1"><span class="badge rounded-full text-bg-primary">2</span> Shipping</span> <span class="flex items-center gap-1 opacity-50"><span class="badge rounded-full text-bg-secondary">3</span> Payment</span> <span class="flex items-center gap-1 opacity-50"><span class="badge rounded-full text-bg-secondary">4</span> Review</span> 
</div>

10Hidden but taking space

opacity-0 keeps the layout slot, so neighbours do not move.

A

B

C

<div class="flex gap-2">
  <div class="bg-info-subtle rounded-lg p-4">
    <code class="small">A</code>
  </div>
  <div class="bg-info-subtle rounded-lg p-4 opacity-0">
    <code class="small">B</code>
  </div>
  <div class="bg-info-subtle rounded-lg p-4">
    <code class="small">C</code>
  </div>
</div>

11Image tint over colour

An image at opacity-75 on a bg-primary parent picks up a brand tint.

<div class="bg-primary rounded-xl overflow-hidden" style="max-width:24rem">
  <img src="../assets/img/photo-12.svg" alt="Feel better with expert care" class="w-full block opacity-75"> 
</div>

12Secondary actions

A low opacity button group for actions that should not compete with the main one.

<div class="flex flex-wrap gap-2">
  <button type="button" class="btn btn-primary">Save</button>
  <button type="button" class="btn btn-outline-secondary opacity-75">Duplicate</button>
  <button type="button" class="btn btn-outline-secondary opacity-50">Archive</button>
</div>

13Out of stock products

The sold out item is shown at opacity-50 with a label.

Blood test

$52.73

Sold out

Blood test

$14.01

<div class="row g-3">
  <div class="col-6 col-md-4">
    <div class="border rounded-lg p-2">
      <img src="../assets/img/product-1.svg" alt="Annual check-up" class="w-full rounded-md">
      <div class="small font-medium mt-2 truncate">
        Blood test
      </div>
      <div class="small">
        $52.73
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="border rounded-lg p-2 relative">
      <img src="../assets/img/product-2.svg" alt="Blood test" class="w-full rounded-md opacity-50"><span class="badge text-bg-dark absolute top-0 start-0 m-4">Sold out</span>
      <div class="small font-medium mt-2 truncate opacity-50">
        Blood test
      </div>
      <div class="small opacity-50">
        $14.01
      </div>
    </div>
  </div>
</div>

14Placeholder skeleton

Rows of bg-body-secondary at opacity-75 sketch content while it loads.

<div class="flex gap-4 items-center" aria-hidden="true">
  <div class="bg-surface-2 rounded-full opacity-75" style="width:48px;height:48px">
  </div>
  <div class="grow">
    <div class="bg-surface-2 rounded-full mb-2 w-1/2 opacity-75" style="height:10px">
    </div>
    <div class="bg-surface-2 rounded-full w-3/4 opacity-50" style="height:10px">
    </div>
  </div>
</div>

15Fading list

Older entries step down in opacity to suggest age.

Your health, our priority
Feel better with expert care
Book a doctor in minutes
Feel better with expert care

<ol class="list-unstyled mb-0 grid gap-1">
  <li class="opacity-100">Your health, our priority</li>
  <li class="opacity-75">Feel better with expert care</li>
  <li class="opacity-50">Book a doctor in minutes</li>
  <li class="opacity-25">Feel better with expert care</li>
</ol>

16Background pattern dots

Large icons at opacity-25 placed in a corner decorate a banner.

Modern healthcare close to home

The new insurance friendly guides your work organised from the very first day.

<div class="relative overflow-hidden text-bg-primary rounded-xl p-6">
  <span class="absolute top-0 end-0 display-1 opacity-25 me-4" aria-hidden="true"><i class="bi bi-stars" aria-hidden="true"></i></span> 
  <h3 class="h5 font-semibold relative">Modern healthcare close to home</h3>
  <p class="small mb-0 relative">The new insurance friendly guides your work organised from the very first day.</p>
</div>

17Unavailable time slots

Booked slots at opacity-25 among free slots.

09:0009:30 10:0010:30 11:0011:30

<div class="flex flex-wrap gap-2">
  <span class="border rounded-md px-4 py-1 small">09:00</span><span class="border rounded-md px-4 py-1 small opacity-25">09:30</span> <span class="border rounded-md px-4 py-1 small">10:00</span><span class="border rounded-md px-4 py-1 small opacity-25">10:30</span> <span class="border border-primary bg-primary-subtle rounded-md px-4 py-1 small">11:00</span><span class="border rounded-md px-4 py-1 small">11:30</span> 
</div>

18Subdued footnote

A small footnote at opacity-75 below the main content.

Our lab tests gives time back in your day wherever you are. A calm launch makes time back in your day without the usual hassle.

* The new insurance friendly makes data easy to understand at a fair price.

<div>
  <p class="mb-1">Our lab tests gives time back in your day wherever you are. A calm launch makes time back in your day without the usual hassle.</p>
  <p class="small opacity-75 mb-0">* The new insurance friendly makes data easy to understand at a fair price.</p>
</div>

19Overlay controls

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

<div class="relative rounded-xl overflow-hidden" style="max-width:26rem">
  <img src="../assets/img/wide-4.svg" alt="What&#39;s new in dermatology" class="w-full block"> 
  <div class="absolute bottom-0 start-1/2 -translate-x-1/2 mb-4 bg-dark/50 rounded-full px-4 py-1 flex gap-4 text-white">
    <span><i class="bi bi-skip-backward-fill" aria-hidden="true"></i></span><span><i class="bi bi-play-fill" aria-hidden="true"></i></span><span><i class="bi bi-skip-forward-fill" aria-hidden="true"></i></span> 
  </div>
</div>

20Avatar of inactive member

Members who left the team are shown at opacity-50.

Kenji Nguyen
Omar Ashford (inactive)

<ul class="list-unstyled mb-0 grid gap-2">
  <li class="flex items-center gap-2"><img src="../assets/img/avatar-4.svg" alt="" width="32" height="32" class="rounded-full"><span>Kenji Nguyen</span></li>
  <li class="flex items-center gap-2 opacity-50"><img src="../assets/img/avatar-5.svg" alt="" width="32" height="32" class="rounded-full"><span>Omar Ashford <small>(inactive)</small></span></li>
</ul>