Pixel Test Fixtures
Visual test page for bg-pixel-* utilities.
RGB pixel columns on black background with screen blend mode (additive mixing). Cell = (width * 3 + gap) wide, (height + gap) tall. Gap separates each R|G|B triplet.
Utility Classes — Primary & Secondary Colors
Defaults: size 1 (width=1px, height=2px), gap 1, bleed 1px.
bg-pixel-white — R+G+B
bg-pixel-black — none
bg-pixel-red-500 — R heavy
bg-pixel-green-500 — G heavy
bg-pixel-blue-500 — B heavy
bg-pixel-cyan-500 — G+B
bg-pixel-fuchsia-500 — R+B
bg-pixel-yellow-500 — R+G
Gap Sizes (pixel-gap-*)
All using bg-pixel-blue-500. Gap is a multiplier of pixel width (pixel-gap-1 = 1x width).
gap-0.5
gap-1
gap-1.5
gap-2
gap-4
gap-6
Pixel Size (pixel-size-*)
Using bg-pixel-red-500. Size sets width (spacing/4, so size-1 = 1px); height is always 2x width.
size-1 (1px)
size-2 (2px)
size-3 (3px)
size-4 (4px)
size-6 (6px)
Bleed (pixel-bleed-*)
Using bg-pixel-white. From crisp LCD to CRT phosphor glow.
bleed-0 (crisp)
bleed-0.5
bleed-1
bleed-1.5
bleed-2
Bleed — All Tailwind Colors (bleed-1)
Color
bleed-0
bleed-1
red-500
orange-500
amber-500
yellow-500
lime-500
green-500
emerald-500
teal-500
cyan-500
sky-500
blue-500
indigo-500
violet-500
purple-500
fuchsia-500
pink-500
rose-500
slate-500
gray-500
white
black
Bleed + Size Combinations (color: white)
size-1 (1px)
bleed-0
bleed-0.5
bleed-1
bleed-1.5
bleed-2
size-2 (2px)
bleed-0
bleed-0.5
bleed-1
bleed-1.5
bleed-2
size-3 (3px)
bleed-0
bleed-0.5
bleed-1
bleed-1.5
bleed-2
Bleed + Gap Combinations (color: white, size default)
gap-0.5
bleed-0
bleed-0.5
bleed-1
bleed-1.5
bleed-2
gap-1
bleed-0
bleed-0.5
bleed-1
bleed-1.5
bleed-2
gap-2
bleed-0
bleed-0.5
bleed-1
bleed-1.5
bleed-2
Opacity (bg-pixel-*/opacity)
All using bg-pixel-red-500 with varying opacity modifiers. The black background and all pixel layers fade together.
100% (default)
/75
/50
/25
/10
/0
Opacity over coloured backgrounds
Verifies the black background becomes transparent, letting underlying content show through.
white/50 over gradient
blue-500/40 over amber
emerald-500/60 over red
yellow-400/30 over dark
Arbitrary Values
bg-pixel-[#ff6600]
pixel-size-[3px]
pixel-bleed-[0.7rem]
Size + Gap Combinations (color: blue)
size-1 (1px w, 2px h)
gap-0.5
gap-1
gap-1.5
gap-2
gap-4
gap-6
size-2 (2px w, 4px h)
gap-0.5
gap-1
gap-1.5
gap-2
gap-4
gap-6
size-3 (3px w, 6px h)
gap-0.5
gap-1
gap-1.5
gap-2
gap-4
gap-6
Border Gradients
Sub-pixel patterns composing with border-gradient utilities on the same element.
Linear Border Gradients
border-linear-to-r
border-linear-to-b
border-linear-to-br
border-linear-45
Radial Border Gradients
border-radial
border-radial [at 25% 25%]
border-radial [at top]
Conic Border Gradients
border-conic-0
border-conic-90
border-conic-180
-border-conic-45
Border Spin
border-spin
spin 500ms
spin 3s
spin /longer
Border Via Colors
linear from/via/to
conic from/via/to
radial from/via/to
Border Gradient Interpolation
/oklch
/hsl
/longer
/shorter
Pixel Variations + Border Gradients
Different pixel sizes and bleed settings with border gradients.
crisp tiny + border via
large pixels + border-spin
CRT glow + border-radial
Side-by-side: Solid vs Pixel — All Tailwind Colors
Color
Solid
Pixel
slate-500
gray-500
zinc-500
neutral-500
stone-500
red-500
orange-500
amber-500
yellow-500
lime-500
green-500
emerald-500
teal-500
cyan-500
sky-500
blue-500
indigo-500
violet-500
purple-500
fuchsia-500
pink-500
rose-500
Full Scale: Blue 50–950
Shade
Solid
Pixel
50
100
200
300
400
500
600
700
800
900
950