• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Opacity checkerboard

Component status
Contribution
Current version@spectrum-css/opacitycheckerboard@1.1.5
ReleasedMarch 7, 2024
Alpha@spectrum-css/opacitycheckerboard@1.0.0-alpha.0
ReleasedJune 23, 2023
View repository
GitHub
View package
npm

Usage notes

Opacity checkerboard is a class used to highlight background color opacity.

Variants

Opacity checkerboard
Contribution

Show markup
<div style="inline-size: 100px; block-size: 100px;">
  <div class="spectrum-OpacityCheckerboard" style="inline-size: 100%; block-size: 100%;">
  </div>
</div>

Opacity checkerboard with color overlay
Contribution

Show markup
<div style="inline-size: 100px; block-size: 100px;">
  <div class="spectrum-OpacityCheckerboard" style="inline-size: 100%; block-size: 100%;"></div>
  <div style="background-color: rgba(255, 0, 0, 0.5); inline-size: 100%; block-size: 100%; position: relative; inset-block: -100%"></div>
</div>