Techniques
Dithered creeper patchwork
The signature mottled green skin: a multi-stop ramp scattered as hard pixel blocks using layered repeating gradients on a 16-unit grid — patchy, never a smooth fill.
.element {
background-color: #43A047;
background-image:
repeating-linear-gradient(90deg,
#5FCB50 0 16px, #74BB43 16px 32px,
#43A047 32px 48px, #0F800F 48px 64px),
repeating-linear-gradient(0deg,
rgba(0,69,0,0.35) 0 16px, transparent 16px 32px);
background-size: 64px 32px, 32px 32px;
background-blend-mode: multiply;
image-rendering: pixelated;
}
Pixel bevel button
The hard 3D edge of a Minecraft UI button — a light top/left and dark bottom/right inset border with a solid offset drop-shadow, zero blur, zero radius.
.element {
background: #5FCB50;
border: 3px solid #2E6A27;
border-top-color: #85D873;
border-left-color: #85D873;
box-shadow: 4px 4px 0 rgba(16,37,13,0.8);
border-radius: 0;
image-rendering: pixelated;
transition: transform 80ms steps(2, end);
}
.element:active {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 rgba(16,37,13,0.8);
}
Stone-cave texel ground
The dark cave background as a faint 16x16 pixel-noise grid, giving the stone-shadow gray a blocky mottled texture instead of a flat panel.
.element {
background-color: #262B26;
background-image:
repeating-linear-gradient(0deg,
rgba(255,255,255,0.02) 0 16px, transparent 16px 32px),
repeating-linear-gradient(90deg,
rgba(0,0,0,0.18) 0 16px, transparent 16px 32px);
background-size: 32px 32px;
image-rendering: pixelated;
}