Halftone effect: print dots on screen
Shades made of dots that grow in the dark parts and shrink in the light, like a newspaper photo or a screen-printed poster. How halftone works, a canvas starter that converts any image, and skills that print with it.
Free skills to start. Pro is $79 a year for every skill, or $9.99 a month for 10. See pricing
What is a halftone effect?
Halftone is how printing makes gray with only black ink. The image becomes a grid of dots: big dots where it is dark, tiny ones where it is light, and from a distance your eye blends them back into tones. With two or three spot inks overprinting, you get the look of comics, pop art, posters and risograph zines.
On a screen it is a style rather than a necessity. It adds texture and a printed, handmade feel to photos, backgrounds, quote cards and heroes.
How the effect works
Lay a grid over the image. For each cell, measure how dark the image is there, and draw a dot whose area matches that darkness. Area, not radius: a dot twice as wide covers four times the paper, so the radius should follow the square root of the darkness.
Print screens are usually rotated, 45 degrees for black, so the grid does not line up with the edges of the picture. For several inks, each gets its own screen at its own angle, and the inks multiply where they overlap, which is where the third color comes from.
01
Read the tone
Sample the image at each cell center and turn the color into luminance.
02
Size the dot by area
radius = √(darkness) × cell × 0.62 so mid-grays look right and dark cells close up.
03
Rotate the screen
Turn the grid by 15 to 45 degrees for a printed look, and give each ink its own angle.
04
Overprint the inks
Draw each ink with multiply blending, and offset one a pixel or two to fake misregistration.
JS
Halftone any image on a canvas
Reads an image, then draws one dot per cell sized by darkness. The image must be same-origin or served with CORS, or the canvas cannot read its pixels.
async function halftone(src, canvas, cell = 8, ink = '#1b1b1f', paper = '#f4efe6') {
const image = new Image()
image.crossOrigin = 'anonymous'
image.src = src
await image.decode()
const w = (canvas.width = image.naturalWidth)
const h = (canvas.height = image.naturalHeight)
const g = canvas.getContext('2d', { willReadFrequently: true })
g.drawImage(image, 0, 0)
const px = g.getImageData(0, 0, w, h).data
g.fillStyle = paper
g.fillRect(0, 0, w, h)
g.fillStyle = ink
for (let y = cell / 2; y < h; y += cell) {
for (let x = cell / 2; x < w; x += cell) {
const i = ((y | 0) * w + (x | 0)) * 4
const light = (0.2126 * px[i] + 0.7152 * px[i + 1] + 0.0722 * px[i + 2]) / 255
const r = Math.sqrt(1 - light) * cell * 0.62 // dot area follows darkness
if (r > 0.3) {
g.beginPath()
g.arc(x, y, r, 0, Math.PI * 2)
g.fill()
}
}
}
}
// halftone('/photo.jpg', document.querySelector('canvas'))A starting point written for this page, free to use in your own projects. The skills below build the finished version with checks, fallbacks and a recorded video.
What to get right on a real page
01
Pick the cell size for the viewing size
Dots should be visible as texture but small enough that the picture still reads. 6 to 12 px cells suit most web images.
02
Use paper, not white
A warm off-white paper and a slightly soft ink color sell the print look more than pure black on white.
03
Keep text off busy dots
Halftoned areas are high-frequency texture. Put copy on plain paper or a solid ink area.
04
Multiply your inks
With two inks, multiply blending gives you the overprint color for free, as real ink does.
Skills that build a halftone effect
One prints a moving two-ink poster behind your hero; the other prints risograph-style quote cards for social.
- Halftone Sunburst HeroClaude CodeCodexCursor+3 more agents
Motion Heroes · Pro
Halftone Sunburst Hero
Animated WebGL hero · page + embed + 1080p video
A hero printed like a two-ink screen poster: a sunburst of rays screened in round halftone dots that swell and shrink as the rays turn, a sun built of dots in counter-rotating rings, and the second ink slightly out of register and drifting, both multiplied on grainy paper.
Worth knowing: The inks multiply on paper, so only light backgrounds are accepted.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Halftone Sunburst Hero makes - Riso Quote CardClaude CodeCodexCursor+3 more agents
Social Cards · Pro
Riso Quote Card
PNG · 1080 × 1350, 1080 × 1080, 1080 × 1920 or 1200 × 630
Quote cards that look risograph-printed: two or three spot inks overprinting, halftone circles and hatched shapes, a few pixels of misregistration and paper grain, all drawn as SVG and rendered to PNG in portrait, square, story or link-preview sizes.
Worth knowing: It makes images, not separated plates for a real risograph.
Needs: Node.js 18+ and Chrome
See what Riso Quote Card makes
Install
Build a halftone effect with your agent
Each skill is a SKILL.md folder, so it installs the same way in Claude Code, Codex, Cursor and other agents. The example below uses Halftone Sunburst Hero; each skill page has its own prompt.
1. Paste the install prompt
Your agent runs the installer. The first time, it shows a sign-in link so you can approve it in the browser.
Install the "Halftone Sunburst Hero" skill from Lookbk (https://lookbk.dev/skills/halftone-sunburst-hero). 1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add halftone-sunburst-hero 2. If it prints a sign-in link, show it to me. When I say I approved it, run the same command again. 3. When the install finishes, read the SKILL.md it installed and tell me what you need from me to make the first result.
Or run it in a terminal
curl -fsSL https://lookbk.dev/cli.js | node - add halftone-sunburst-hero2. Start a new session
Agents load skills when a session starts. The installer writes the folder where your agent looks:
- Claude Code
- ~/.claude/skills/halftone-sunburst-hero
- Codex
- ~/.agents/skills/halftone-sunburst-hero
- Cursor
- ~/.agents/skills/halftone-sunburst-hero
3. Ask for the result
Describe it in plain words, for example:
Build a Halftone Sunburst hero for Longlight, our music festival on the Isle of Bute: navy rays and a tomato-red striped sunset on cream paper, headline 'Three days of the longest light.', and record the video for the line-up announcement.
Another agent? Install a skill in any agent
FAQ
Questions
Still stuck? The guides cover installing, agents and licensing in more detail.
Read the guidesWhat is a halftone effect?
A way to show tones with dots of one ink: large dots for dark areas, small dots for light ones. From a distance the eye blends them into shades.
How do I make a halftone effect in CSS?
A radial-gradient dot pattern masked by the image gives a rough version, and some blend mode tricks get closer. For dots that really follow the picture, read its pixels in a canvas or shader as in the starter above.
Why are halftone screens angled?
An angled grid hides the rows of dots from the eye, and giving each ink a different angle stops them from forming a moiré pattern where they overlap.
What is the difference between halftone and dithering?
Halftone varies the size of dots on a regular grid. Dithering keeps pixels the same size and varies how many are inked, in an ordered or error-diffused pattern.