Opacity

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

Introduction

Opacity Utilities

Breakpoint Modifiers