A game cartridge card, in flat CSS

We use cartridge cards all over basement.fun to represent games. The fully 3D one is fun but heavy. This is the flat version — no canvas, no transforms, just CSS shapes — and it holds up surprisingly well.

NEW

Ball BlasterAim, charge, fire. Clear the board.

Play game

Game NFT

Mint once, play forever

The whole thing is one polygon

The cartridge outline is a single clip-path polygon. I don't draw it four times by hand — I stack the same clipped box four times and let each layer do one job:

1. blurred copy, offset down   → drop shadow
2. gradient-filled copy        → the beveled border
3. inset copy (1px in)         → the real background
4. second clip-path on top     → the media well

The 1px insets are what sell it. Layer 3 sits inside layer 2, so the gradient border peeks out exactly one pixel around the edge — like the seam on a piece of molded plastic. Same move on the media well.

Noise does the heavy lifting

Flat fills look digital. A tiled subtle-noise PNG over every fill is the single biggest upgrade — it reads as a textured surface instead of a <div>.

.subtle-noise {
  background-image: url("/cartridge/subtle-noise.png");
  background-repeat: repeat;
}

Accent that stays legible

The label tab takes any accent color, so the text on it can't be hardcoded. A small luminance check picks black or white:

const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
return lum > 0.6 ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.92)";

The basement original leans on framer-motion, number-flow, and a couple of internal components for the mint counter. I stripped all of that — the shape is the interesting part, and the shape is pure CSS.

From basement.fun, a project I work on at B3. Grab it on the Compact Cartridge page.