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

Opacity checkerboard

Component status
Contribution
Current version@spectrum-css/opacitycheckerboard@2.1.3
ReleasedSeptember 13, 2024
Alpha@spectrum-css/opacitycheckerboard@1.0.0-alpha.0
ReleasedJune 23, 2023
S2-foundations@spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.15
ReleasedOctober 4, 2024

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>