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
<div class="flex flex-wrap gap-4 small text-center">
<div>
<div class="bg-primary rounded-lg opacity-100 mb-1" style="width:4rem;height:3rem">
</div>
100
</div>
<div>
<div class="bg-primary rounded-lg opacity-75 mb-1" style="width:4rem;height:3rem">
</div>
75
</div>
<div>
<div class="bg-primary rounded-lg opacity-50 mb-1" style="width:4rem;height:3rem">
</div>
50
</div>
<div>
<div class="bg-primary rounded-lg opacity-25 mb-1" style="width:4rem;height:3rem">
</div>
25
</div>
<div>
<div class="bg-primary rounded-lg opacity-0 border mb-1" style="width:4rem;height:3rem">
</div>
0
</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">
<figure class="mb-0">
<div inert>
<div class="bg-success text-white rounded-lg p-4 opacity-50 font-semibold">
opacity-50
</div>
</div>
<figcaption class="small text-muted mt-2 mb-0">The text fades too - here below 4.5:1.</figcaption>
</figure>
</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.
30-day returns
Available
30-day returns
Coming soon
<div class="row g-2">
<div class="col-sm-6">
<div class="border rounded-lg p-4">
<div class="font-semibold">
30-day returns
</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" role="group" aria-disabled="true">
<div class="font-semibold">
30-day returns
</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="https://images.unsplash.com/photo-1521335629791-ce4aec67dd15?auto=format&fit=crop&w=800&h=800&q=70" alt="Thumbnail 1" width="80" height="80" class="rounded-lg object-cover border border-2 border-primary"> <img src="https://images.unsplash.com/photo-1573612664822-d7d347da7b80?auto=format&fit=crop&w=800&h=800&q=70" alt="Thumbnail 2" width="80" height="80" class="rounded-lg object-cover opacity-50"> <img src="https://images.unsplash.com/photo-1443884590026-2e4d21aee71c?auto=format&fit=crop&w=800&h=800&q=70" 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-75 and get a line through - still readable (opacity-50 text is below 4.5:1).
- Free shipping
- Live order tracking
- 30-day returns
<ul class="list-unstyled mb-0 grid gap-2">
<li class="opacity-75 line-through"><i class="bi bi-check-square-fill" aria-hidden="true"></i> Free shipping</li>
<li class="opacity-75 line-through"><i class="bi bi-check-square-fill" aria-hidden="true"></i> Live order tracking</li>
<li><i class="bi bi-square-fill" aria-hidden="true"></i> 30-day returns</li>
</ul>7Watermark text
Huge text at opacity-25 behind a heading as a decorative watermark (inert and aria-hidden: decoration has no contrast requirement).
Designed to last, priced to love
New pieces arrive every month, and the best ones sell out fast.
<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-ink opacity-25 whitespace-nowrap pointer-events-none" aria-hidden="true" inert>
2015
</div>
<h3 class="relative h5 font-semibold mb-1">Designed to last, priced to love</h3>
<p class="relative small mb-0">New pieces arrive every month, and the best ones sell out fast.</p>
</div>8Muted icons
Decorative icons at opacity-75 or -50 next to labels.
- 196 Riverside Drive, Copenhagen
- +1 (555) 987-8168
- ella.ibrahim@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>196 Riverside Drive, Copenhagen</li>
<li><span class="opacity-50 me-2"><i class="bi bi-telephone-fill" aria-hidden="true"></i></span>+1 (555) 987-8168</li>
<li><span class="opacity-50 me-2"><i class="bi bi-envelope-fill" aria-hidden="true"></i></span>ella.ibrahim@example.com</li>
</ul>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
<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" role="group" aria-disabled="true"><span class="badge rounded-full text-bg-secondary">3</span> Payment</span> <span class="flex items-center gap-1 opacity-50" role="group" aria-disabled="true"><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.
ABC<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="https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1200&h=800&q=70" alt="Shop the collection everyone talks about" class="w-full block opacity-75">
</div>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).
<div class="flex flex-wrap gap-2">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-link link-secondary">Duplicate</button>
<button type="button" class="btn btn-outline-secondary opacity-50" disabled>Archive</button>
</div>13Out of stock products
The sold out item has its picture at opacity-50, a label and its text at opacity-75 (still readable).
Linen shirt
$67.75
Sold outCanvas tote
$20.83
<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="Linen shirt" class="w-full rounded-md">
<div class="small font-medium mt-2 truncate">
Linen shirt
</div>
<div class="small">
$67.75
</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="Canvas tote" 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-75">
Canvas tote
</div>
<div class="small opacity-75">
$20.83
</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.
- Good things, made to be used
- Style that works as hard as you do
- Pieces you will reach for every day
- New season, new favourites
<figure class="mb-0">
<div inert>
<ol class="list-unstyled mb-0 grid gap-1">
<li class="opacity-100">Good things, made to be used</li>
<li class="opacity-75">Style that works as hard as you do</li>
<li class="opacity-50">Pieces you will reach for every day</li>
<li class="opacity-25">New season, new favourites</li>
</ol>
</div>
<figcaption class="small text-muted mt-2 mb-0">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.</figcaption>
</figure>16Background pattern dots
Large icons at opacity-25 placed in a corner decorate a banner.
Everyday essentials, beautifully made
Not sure about the size? Our fit guide and live chat help you choose.
<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">Everyday essentials, beautifully made</h3>
<p class="small mb-0 relative">Not sure about the size? Our fit guide and live chat help you choose.</p>
</div>17Unavailable time slots
Booked slots are disabled buttons at opacity-25 among the free slots.
<div class="flex flex-wrap gap-2" role="group" aria-label="Time slots">
<button type="button" class="btn btn-sm btn-outline-secondary">09:00</button>
<button type="button" class="btn btn-sm btn-outline-secondary opacity-25" disabled>09:30</button>
<button type="button" class="btn btn-sm btn-outline-secondary">10:00</button>
<button type="button" class="btn btn-sm btn-outline-secondary opacity-25" disabled>10:30</button>
<button type="button" class="btn btn-sm btn-primary" aria-pressed="true">11:00</button>
<button type="button" class="btn btn-sm btn-outline-secondary">11:30</button>
</div>18Subdued footnote
A small footnote at opacity-75 below the main content.
Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.
* Order before 2 pm and most items leave our warehouse the same day.
<div>
<p class="mb-1">Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.</p>
<p class="small opacity-75 mb-0">* Order before 2 pm and most items leave our warehouse the same day.</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="https://images.unsplash.com/photo-1598305762558-328f599df683?auto=format&fit=crop&w=1600&h=700&q=70" alt="Meet the makers behind our ceramics" 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-75 - quieter, still readable.
Finn Larsen
Ruby Sato (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>Finn Larsen</span></li>
<li class="flex items-center gap-2 opacity-75"><img src="../assets/img/avatar-5.svg" alt="" width="32" height="32" class="rounded-full"><span>Ruby Sato <small>(inactive)</small></span></li>
</ul>