HeroKitヒーロー
Free to explore · Browser‑based · No signup · No uploads

Hero backgrounds,
engineered.

Drop in an image, stack real print / dither / glitch effects computed pixel‑by‑pixel, preview it under a live hero layout, and export up to 4K.

30+
stackable effects
4K
PNG · WebP · JPG export
0
uploads — fully client‑side
$0
free to explore, no account
01 · Palette

Press‑room black, one safelight accent.

The same warm neutral scale, inverted to near‑black, with the accent tuned brighter so it still pops the way it does on paper.

paper
#17151F
surface
#201D19
ink
#F2EFEA
ink‑muted
#A69E8E
line
#3C362C
accent
#FF5A34
accent‑hi
#FF7A50
accent‑shadow
#7A2008
02 · Typography

Same faces, unchanged.

Space Grotesk, Inter, and Share Tech Mono carry over exactly — only their colors follow the darkroom neutrals.

Display / H1 · Space Grotesk · 700
Hero backgrounds, engineered.
Section head · Space Grotesk 700 · 34px
From flat photo to front‑page material.
Body · Inter 400 · 16–18px
If the type reads, it ships — the real technique, not a filter menu.
Label · Share Tech Mono · UPPERCASE
Free to explore · Browser‑based · No signup
03 · Components

The same hardware key, glowing brighter.

Identical raised‑key mechanics; the specular highlight dims and the colored glow strengthens to read correctly on dark.

Try It Free See the engine ↓ 16:9 Desktop hero

Effect module list (excerpt):

HalftoneDuotone HalftoneRisographCMYK Separation SilkscreenBayer DitherFloyd‑SteinbergAtkinson ASCII DitherPixel SortChannel SmearFilm Grain
04 · Tokens

Quick token summary.

:root {
  --paper:            #17151F;
  --surface:          #201D19;
  --ink:              #F2EFEA;
  --ink-muted:        #A69E8E;
  --line:             #3C362C;

  --accent:           #FF5A34;
  --accent-hi:        #FF7A50;
  --accent-lo:        #E8481F;
  --accent-border:    #B8310F;
  --accent-shadow:    #7A2008;

  --font-display:     "Space Grotesk", sans-serif;
  --font-body:        "Inter", sans-serif;
  --font-mono:        "Share Tech Mono", monospace;

  --r-btn: 10px;  --r-card: 12px;  --r-mount: 16px;
  --container: 1152px;  --gutter: 24px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}