Opacity • Natura11y
Jump to main contentJump to website footer
Closeup photography of swarm of jellyfish

Photo by Marat Gilyadzinov

Opacity

Introduction

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