Opacity

Opacity utilities control the transparency of an element and all of its children. Values range from fully transparent (0) to fully opaque (100).

Opacity scale

0
.nys-opacity-0
10
.nys-opacity-10
20
.nys-opacity-20
30
.nys-opacity-30
40
.nys-opacity-40
50
.nys-opacity-50
60
.nys-opacity-60
70
.nys-opacity-70
80
.nys-opacity-80
90
.nys-opacity-90
100
.nys-opacity-100
Copy Code
<div class="nys-opacity-0">Fully transparent (0)</div>
<div class="nys-opacity-50">Half transparent (0.5)</div>
<div class="nys-opacity-100">Fully opaque (1)</div>

All opacity classes

Class CSS value
.nys-opacity-0 opacity: 0
.nys-opacity-10 opacity: 0.1
.nys-opacity-20 opacity: 0.2
.nys-opacity-30 opacity: 0.3
.nys-opacity-40 opacity: 0.4
.nys-opacity-50 opacity: 0.5
.nys-opacity-60 opacity: 0.6
.nys-opacity-70 opacity: 0.7
.nys-opacity-80 opacity: 0.8
.nys-opacity-90 opacity: 0.9
.nys-opacity-100 opacity: 1

Practical example

Opacity is useful for indicating disabled states or creating visual layering effects.

Copy Code
<!-- Active button -->
<nys-button label="Submit application"></nys-button>
<!-- Visually disabled appearance using opacity -->
<div class="nys-opacity-40" style="pointer-events: none;">
  <nys-button label="Submit application"></nys-button>
</div>

Responsive variants

All opacity utilities support responsive prefixes. See Responsive Utilities for breakpoint details.

<div class="nys-opacity-50 nys-desktop:nys-opacity-100">
  Half transparent on mobile, fully opaque on desktop
</div>

Edit this page on GitHub (Permissions required)

Last updated: June 17, 2026