Pixel

LCD/CRT-style RGB pixel backgrounds. Any colour is decomposed into three rectangular columns — red, green, and blue — using additive colour mixing via CSS relative colour syntax and background-blend-mode: screen.

Import

Included in @import 'tw-jib-css'. To import individually:

@import 'tw-jib-css/pixel';

Browser Support

Requires CSS relative colour syntax (rgb(from ... r 0 0)). Chrome 111+, Safari 16.4+, Firefox 128+.

Quick Reference

Class	Styles
bg-pixel-<color>	Sets colour and applies RGB pixel pattern with background-blend-mode: screen
bg-pixel-<color>/<opacity>	Same with opacity modifier
bg-pixel-[<value>]	Arbitrary colour value
pixel-size-<number>	--pixel-size: --spacing(<number>) / 4 — pixel size (width = size, height = size * 2)
pixel-size-[<value>]	--pixel-size: <value>
pixel-gap-<number>	--pixel-gap: <number> — gap multiplier of pixel width
pixel-gap-[number:<value>]	--pixel-gap: <value>
pixel-bleed-<number>	--pixel-bleed: --spacing(<number>) / 4 — edge softness
pixel-bleed-[<value>]	--pixel-bleed: <value>

How it works

Each colour is split into its RGB channels — the direct components of additive light:

Column	Colour	Extraction
R (red)	rgb(r 0 0)	Red channel only
G (green)	rgb(0 g 0)	Green channel only
B (blue)	rgb(0 0 b)	Blue channel only

Four background layers are composited — each channel needs its own layer for screen blending to work additively:

1. Row mask — repeating-linear-gradient(to bottom, ...) with white rows and black gaps. Blended with multiply to punch out horizontal row separators.
2. Red column — repeating-linear-gradient(to right, ...) at column position 0. Blended with screen.
3. Green column — same, at column position 1. Blended with screen.
4. Blue column — same, at column position 2. Blended with screen.

Over a black background-color. The screen blend mode adds the channels together (additive mixing), creating tall rectangular pixels arranged in R|G|B triplets — just like a real LCD panel. When pixel-bleed > 0, the colour bleeds outward into the black gaps, and adjacent channels overlap to produce secondary colours (yellow, cyan, magenta) — mimicking CRT phosphor glow.

Basic Usage

Add bg-pixel-{color} to any element:

Gap

Control the space between each R|G|B pixel triplet with pixel-gap-{number}. The value is a multiplier of the pixel width — pixel-gap-1 = 1x pixel width, pixel-gap-2 = 2x, etc. The default is 1.

gap-0.5

gap-1

gap-1.5

gap-2

gap-4

Gap scales proportionally with pixel size — changing pixel-size-* automatically adjusts the gap.

Size

Control the pixel size with pixel-size-{number}. Scales at spacing/4 so pixel-size-1 = 1px, pixel-size-2 = 2px. Width equals the size value; height is always 2x width (preserving the 1:2 aspect ratio). The default is 1px.

size-1

size-2

size-3

size-4

size-6

Bleed

Control the edge softness with pixel-bleed-{number}. Scales at spacing/4 so pixel-bleed-1 = 1px. This spreads the colour into the black gaps to create a glow effect. The default is 1px.

• pixel-bleed-0 — crisp hard-edged rectangles (LCD look)
• pixel-bleed-1 — slight softness (default)
• Larger values — increasingly soft edges (CRT phosphor glow)

bleed-0

bleed-0.5

bleed-1

bleed-1.5

bleed-2

Opacity

Add an opacity modifier with the / syntax to fade the entire pattern — all three RGB channel layers, the row mask, and the black background. The value is a percentage (0–100).

100%

/75

/50

/25

/10

This scales the RGB channel opacities proportionally and makes the black background semi-transparent, so the pattern can be layered over other content.

over gradient

over gradient

RGB Channel Behaviour

Every Tailwind colour at every shade, rendered as pixels. Whites light all three R|G|B columns equally. Pure hues light only the relevant channels — red lights R, blue lights B, yellow lights R+G.

Slate

Gray

Red

Orange

Amber

Yellow

Green

Emerald

Cyan

Blue

Violet

Purple

Fuchsia

Pink

Rose

Using a custom value

Use the arbitrary value syntax for colours not in the Tailwind palette:

Applying conditionally

All bg-pixel-* and pixel-* utilities support Tailwind's variant syntax:

<div class="bg-blue-500 hover:bg-pixel-blue-500">
  Sub-pixels on hover
</div>

<div class="bg-pixel-red-500 md:pixel-size-3">
  Larger pixels on medium screens
</div>

Test Fixtures

See the Sub-Pixel Test Fixtures page for comprehensive visual tests across all Tailwind colours and parameter combinations.