Background
The Background system creates the illusion of grayscale through carefully designed dither patterns. When rendered on 1-bit (black and white only) displays, these patterns create an illusion of different shades of gray by using specific arrangements of black and white pixels.
Usage
Use the bg-{color} utility
classes to apply these background patterns to any element. Choose from nine values: black, gray-1 through gray-7,
and white.
black
gray-1
gray-2
gray-3
gray-4
gray-5
gray-6
gray-7
white
Background Colors
<div class="bg-black">Black</div>
<div class="bg--gray-1">Gray 1</div>
<div class="bg--gray-2">Gray 2</div>
<div class="bg--gray-3">Gray 3</div>
<div class="bg--gray-4">Gray 4</div>
<div class="bg--gray-5">Gray 5</div>
<div class="bg--gray-6">Gray 6</div>
<div class="bg--gray-7">Gray 7</div>
<div class="bg-white">White</div>