HeroKitヒーロー
Try It Free
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.

Try It Free See the engine ↓
30+
stackable effects
4K
PNG · WebP · JPG export
0
uploads — fully client‑side
$0
free to explore, no account
01 · Palette

Warm paper, one hot accent.

Not pure gray — a paper‑based neutral scale, plus a single radial‑gradient orange‑red reserved for the CTA and small marks.

paper
#F2F0EB
surface
#F8F6F2
ink
#1A1917
ink‑muted
#6B6860
line
#CDC9BF
accent
#E84320
accent‑hi
#F05535
accent‑shadow
#9E2A0D
02 · Typography

Space Grotesk, Inter, Share Tech Mono.

All three families are already free — no substitution needed for this preview.

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

A hardware key, not a flat button.

The primary CTA is a raised radial‑gradient key in a recessed socket: it lifts 1px and glows on hover, presses down 3px on click.

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:            #F2F0EB;
  --surface:          #F8F6F2;
  --ink:              #1A1917;
  --ink-muted:        #6B6860;
  --line:             #CDC9BF;

  --accent:           #E84320;
  --accent-hi:        #F05535;
  --accent-lo:        #D43A1C;
  --accent-border:    #B8310F;
  --accent-shadow:    #9E2A0D;

  --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);
}