Skip Navigation

Photo by Marat Gilyadzinov  on Unsplash

Opacities

Change the opacity property of an element. While opacity utilities work well with backdrops, you can apply them to any element you wish.

Opacity Utilities

The opacity utilities (Figure 1) range from 10 to 90 in increments of 10. For example, .opacity-50 applies a 50% opacity to its selector.

.opacity-10

.opacity-20

.opacity-30

.opacity-40

.opacity-50

.opacity-60

.opacity-70

.opacity-80

.opacity-90

<div class="opacity-10">...</div>
<div class="opacity-20">...</div>
<div class="opacity-30">...</div>
<div class="opacity-40">...</div>
<div class="opacity-50">...</div>
<div class="opacity-60">...</div>
<div class="opacity-70">...</div>
<div class="opacity-80">...</div>
<div class="opacity-90">...</div>
Figure 1

Breakpoint Modifiers

Opacity utilities accept breakpoint modifiers.

With the HTML in Figure 2, the purple rectangle changes to 40% opacity at the large breakpoint.

.opacity-50--lg

<div class="opacity-50--lg">...</div>
Figure 2