---
title: "A game cartridge card, in flat CSS"
description: "A 2D cartridge card with molded-plastic edges, built from one clip-path polygon stacked four times. No 3D, no canvas — just layered shapes, a noise texture, and a luminance-aware accent. Pulled from basement.fun."
date: "2026-05-31"
tags: ["css", "clip-path", "card", "frontend"]
---

We use cartridge cards all over [basement.fun](https://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.

    title="Ball Blaster"
    description="Aim, charge, fire. Clear the board."
    media="/cartridge/samples/ball-blaster.png"
    topLabel="NEW"
    topLabelHoverText="Mint $1"
    accentColor="#f43f5e"
    backgroundColor="#1a0f14"
  />

## 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:

```text
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>`.

```css
.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:

```ts
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](https://basement.fun), a project I work on at B3. Grab it on
the [Compact Cartridge](/components/compact-cartridge) page.