Shader Atlas
한국어
▚ Stylize & media textures

Halftone

하프톤

Replaces continuous color and tone with regular ink dots for a printed look.

Also known as: Halftonehalftone dotsBen-Day dots

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, Halftone, ImageTexture } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/still.jpg" />
      <Halftone />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script setup lang="ts">
import { Shader, Halftone, ImageTexture } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/still.jpg"/>
    <Halftone/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script>
  import { Shader, Halftone, ImageTexture } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/still.jpg" />
  <Halftone />
</Shader>
Solid
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, Halftone, ImageTexture } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/still.jpg" />
      <Halftone />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'ImageTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/still.jpg',
      },
    },
    {
      type: 'Halftone',
    }
  ]
}, { disableTelemetry: true })

Props · Halftone

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
styleStyleclassicclassic · cmykHalftone rendering style
frequencyFrequency10010 – 300 (step 1)Frequency of the halftone dots
angleAngle450 – 360 (step 1)Rotation angle of the pattern (in degrees)
cyanAngleCyan Angle150 – 360 (step 1)Screen angle for the cyan plate (in degrees)
magentaAngleMagenta Angle750 – 360 (step 1)Screen angle for the magenta plate (in degrees)
yellowAngleYellow Angle00 – 360 (step 1)Screen angle for the yellow plate (in degrees)
blackAngleBlack Angle450 – 360 (step 1)Screen angle for the black plate (in degrees)
misprintMisprint00 – 0.01 (step 0.0005)Simulated mis-registration between plates. Plates are offset around the misprint angle, producing color fringing at the edges of inked regions.
misprintAngleMisprint Angle00 – 360 (step 1)Direction the plates drift apart. Rotating this rotates the color-fringing pattern.
paperColorPaper#ffffff—Paper/substrate color shown where no ink lands
cyanColorCyan#00ffff—Cyan ink color
magentaColorMagenta#ff00ff—Magenta ink color
yellowColorYellow#ffff00—Yellow ink color
blackColorBlack#000000—Black (key) ink color

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Dither디더링

Uses a dot pattern to represent tones with fewer colors, creating a dithering effect.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Pixelate픽셀화

Groups an image into large pixel cells for a low-resolution pixel-art look.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Engraving동판화

Redraws an image as flowing line work whose weight changes with brightness, like a copperplate engraving.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Film Grain필름 그레인

Overlays fine grain, weighted toward darker areas, for an analog film texture.

It makes colors look as if they were printed on paper with tiny ink dots. Think of the enlarged dot patterns in a comic book or pop-art poster.

The default `style` is `classic` and selects a halftone treatment. `frequency` defaults to 100 and ranges from 10 to 300 to set dot density; `angle` defaults to 45 degrees and ranges from 0 to 360 degrees to rotate the pattern. `misprint` defaults to 0 and ranges from 0 to 0.01 to offset the color plates. The default `paperColor` is `#ffffff`.

Put an image underneath so it can be converted into printed dots. Pair it with `Dither` or `Engraving` for other printmaking textures, but high frequency can make small dots merge and hide detail.

When to use

Use it for pop-art posters, comic-inspired images, and print concepts. Avoid it when smooth color fields and small details need to remain intact.

Open as page ↗