Stylized pixelation

Loved this chunky pixelated look where a photo turns into big two-color blocks. The nice part is the blocks are a little soft on the corners, so it reads as a style, not a broken image.

It runs live in the browser on your own photo or your camera. The image is crushed into two colors, cut into square blocks, softened, then crushed again so the blocks keep those rounded edges. Below you can change the block size, the smoothing, and the two colors, or hit Remix for a fresh pair.

Playground

Pixel size20px

Smoothing4px

Threshold58%

Edge shadow35%

Swap the two colours

Code

// The editable pixelation parameters + presets. Always DUOTONE: the image is crushed
// to two colours (dark shapes on a light ground). The first preset is the EXACT
// decoded default (pixel 20, smoothing 4, threshold 128/255) as near-black on white;
// the others are unique two-colour duotones across the same knobs. One source of truth
// for the display card and the playground.

export type PixelateParams = {
  pixel: number; // mosaic cell size in px
  smooth: number; // box-blur radius in px (edge smoothing)
  thresh: number; // threshold cutoff 0..1 (128/255 = 0.502)
  invert: boolean; // swap which colour is the shapes vs the ground
  offset: number; // offset-multiply strength 0..1 (printed edge)
  colorA: string; // dark shapes
  colorB: string; // light ground
};

export const DEFAULTS: PixelateParams = {
  pixel: 20,
  smooth: 4,
  thresh: 0.58,
  invert: false,
  offset: 0.35,
  colorA: "#141414",
  colorB: "#fcfcfc",
};

export type Preset = { id: string; name: string; params: PixelateParams };

// Each preset is a distinct duotone: a vivid, unique pair (ink + ground). Spread
// across the wheel so cycling Remix never repeats a look.
export const PRESETS: Preset[] = [
  { id: "classic", name: "Ink on paper", params: { ...DEFAULTS } },
  {
    id: "blue",
    name: "Blueprint",
    params: { ...DEFAULTS, colorA: "#0b1f5c", colorB: "#eaf0ff", pixel: 22, smooth: 5 },
  },
  {
    id: "red",
    name: "Risograph red",
    params: { ...DEFAULTS, colorA: "#e02424", colorB: "#fff1e8", pixel: 18, smooth: 3 },
  },
  {
    id: "green",
    name: "Forest",
    params: { ...DEFAULTS, colorA: "#0f3d2e", colorB: "#e8f6ec", pixel: 26, smooth: 6 },
  },
  {
    id: "violet",
    name: "Grape",
    params: { ...DEFAULTS, colorA: "#3b1f6e", colorB: "#f3ecff", pixel: 16, smooth: 3 },
  },
  {
    id: "amber",
    name: "Amber",
    params: { ...DEFAULTS, colorA: "#7a3b00", colorB: "#fff4d6", pixel: 30, smooth: 7 },
  },
  {
    id: "teal",
    name: "Teal",
    params: { ...DEFAULTS, colorA: "#043b45", colorB: "#e0fbff", pixel: 20, smooth: 4 },
  },
  {
    id: "night",
    name: "Night",
    params: { ...DEFAULTS, colorA: "#e8e2ff", colorB: "#151228", invert: false, pixel: 22, smooth: 5 },
  },
];

export function defaultParams(): PixelateParams {
  return { ...DEFAULTS };
}

Credits

CompanyStudy

DateJul 13, 2026

TagsWebGL, Pixelation, Shader

MIT → free to copy