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.

Networking app

Available

Networking app

Coming soon

<div class="row g-2">
  <div class="col-sm-6">
    <div class="border rounded-lg p-4">
      <div class="font-semibold">
        Networking app
      </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">
        Networking app
      </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.

Live streaming
Venue booking
Networking app

<ul class="list-unstyled mb-0 grid gap-2">
  <li class="opacity-50 line-through"><i class="bi bi-check-square-fill" aria-hidden="true"></i> Live streaming</li>
  <li class="opacity-50 line-through"><i class="bi bi-check-square-fill" aria-hidden="true"></i> Venue booking</li>
  <li><i class="bi bi-square-fill" aria-hidden="true"></i> Networking app</li>
</ul>

7Watermark text

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

Where great ideas meet

Our live streaming helps decisions quicker and clearer wherever you are.

<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">
    2025
  </div>
  <h3 class="relative h5 font-semibold mb-1">Where great ideas meet</h3>
  <p class="relative small mb-0">Our live streaming helps decisions quicker and clearer wherever you are.</p>
</div>

8Muted icons

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

433 Willow Way, Oslo
+1 (555) 411-2036
lucas.patel@example.com

<ul class="list-unstyled mb-0 grid gap-2">
  <li><span class="opacity-50 me-2"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i></span>433 Willow Way, Oslo</li>
  <li><span class="opacity-50 me-2"><i class="bi bi-telephone-fill" aria-hidden="true"></i></span>+1 (555) 411-2036</li>
  <li><span class="opacity-50 me-2"><i class="bi bi-envelope-fill" aria-hidden="true"></i></span>lucas.patel@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-5.svg" alt="Where great ideas meet" 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.

Group bundle

$10.20

Sold out

Workshop ticket

$18.49

<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="VIP pass" class="w-full rounded-md">
      <div class="small font-medium mt-2 truncate">
        Group bundle
      </div>
      <div class="small">
        $10.20
      </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="Group bundle" 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">
        Workshop ticket
      </div>
      <div class="small opacity-50">
        $18.49
      </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.

Learn, connect and get inspired
Learn, connect and get inspired
Experiences people talk about
Three days that change how you work

<ol class="list-unstyled mb-0 grid gap-1">
  <li class="opacity-100">Learn, connect and get inspired</li>
  <li class="opacity-75">Learn, connect and get inspired</li>
  <li class="opacity-50">Experiences people talk about</li>
  <li class="opacity-25">Three days that change how you work</li>
</ol>

16Background pattern dots

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

Experiences people talk about

The new recorded sessions guides new ideas to life 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">Experiences people talk about</h3>
  <p class="small mb-0 relative">The new recorded sessions guides new ideas to life 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.

The new networking lounges brings data easy to understand at a fair price. The new certificates shows new ideas to life on any device.

* Our speaker management keeps you focused on what matters at a fair price.

<div>
  <p class="mb-1">The new networking lounges brings data easy to understand at a fair price. The new certificates shows new ideas to life on any device.</p>
  <p class="small opacity-75 mb-0">* Our speaker management keeps you focused on what matters 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-12.svg" alt="What&#39;s new in panel" 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.

Ava Delgado
Nora 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>Ava Delgado</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>Nora Ashford <small>(inactive)</small></span></li>
</ul>