Techniques
Dot-matrix screen overlay
The 160×144 LCD grid rendered as a repeating 4px pixel lattice over any "screen" surface. Apply to heroes, cards, and the page background to sell the dot-matrix illusion.
.gb-screen {
background-color: #9BBC0F;
background-image:
linear-gradient(rgba(15, 56, 15, 0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(15, 56, 15, 0.12) 1px, transparent 1px);
background-size: 4px 4px;
image-rendering: pixelated;
border: 4px solid #0F380F;
box-shadow:
inset 0 0 0 2px #306230,
6px 6px 0 #0F380F;
}
Dithered green gradient
Smooth gradients are forbidden, so tonal shifts are faked with a checkerboard Bayer dither between two of the four greens — just like Link's Awakening renders a sunset.
.gb-dither {
background-color: #8BAC0F;
background-image:
linear-gradient(45deg, #0F380F 25%, transparent 25%),
linear-gradient(-45deg, #0F380F 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #0F380F 75%),
linear-gradient(-45deg, transparent 75%, #0F380F 75%);
background-size: 4px 4px;
background-position: 0 0, 0 2px, 2px -2px, -2px 0;
image-rendering: pixelated;
}
Pixel bezel frame (DMG-01 screen)
Reproduces the chunky plastic-and-screen sandwich of a real Game Boy: a `#C4CFA1` plastic body outside, a `#2C2C2C` bezel ring inside, and the green screen at the center — the canonical card frame for this system.
.gb-bezel {
padding: 12px;
background: #C4CFA1;
border: 3px solid #0F380F;
box-shadow: 4px 4px 0 #0F380F;
}
.gb-bezel::before {
content: "";
display: block;
padding: 16px;
background: #9BBC0F;
border: 4px solid #2C2C2C;
box-shadow: inset 0 0 0 2px #306230;
image-rendering: pixelated;
}