Riso Dither

Gradients

Description

Animated flow field quantized through a Bayer matrix into a limited ink palette — crisp retro risograph halftone dithering with chunky pixels, wind-swept ribbons, and a drifting luminous core.

What is the dithering effect?

Riso Dither is a free dithering effect that renders in real time with WebGL, so it stays sharp on any screen without shipping a heavy video file or GIF — and it pauses while off-screen to keep pages fast.

Use it as visual inspiration for a hero or section background on a landing page, portfolio, SaaS site or app. Every parameter — colors, speed and intensity — is adjustable in the remix playground. No account is needed to preview it.

Make it yours

Every knob below is tuned by the AI to match your design — or ask for changes in plain language, like “slower and more blue.”

colorsPalette

Ink ramp from shadow to highlight: first color is the dim base ink that emerges from the background, last is the brightest highlight ink. 2 colors = classic two-ink risograph print, 4+ = rich sunset poster ramp. Keep hues in a coherent temperature arc so quantized steps read as intentional inks, not mud.

bgPalette

The paper color the dither dissolves into; large calm areas of this tone are where overlay text sits. Darker = moodier print, lighter = airy zine paper.

bg-alpha0–1

1 = opaque paper; 0 = background-level cells become fully transparent so the host section shows through a crisp dithered cutout. Use 0 to float dithered clouds over an existing page background.

speed0.02–2

Higher = lively churning print, lower = glacial expensive drift. Keep at or below 0.5 for hero backgrounds; 1+ feels energetic and gamey.

pixel-size1–16

Size of each dither cell in device pixels. Higher = chunky retro-game pixels (8-12 for bold lo-fi cards), lower = fine newspaper halftone (1-3 for subtle texture).

levels2–16

Number of quantization steps across the palette. 2 = stark 1-bit dither, 5-7 = graphic poster bands, 12+ = nearly smooth gradient with only whisper-thin dithering.

scale0.3–5

Zoom of the underlying flow field. Higher = more, smaller cloud shapes and busier texture; lower = one giant slow-moving form filling the frame.

contrast0.4–2.5

Higher = punchy graphic separation with more pure background negative space; lower = hazy tonal wash where every level appears. 1.4-1.8 for bold editorial looks.

flow-angle0–360

Direction in degrees the ribbons stretch and drift along. 0 = horizontal wind-swept bands, 90 = vertical rising smoke, 30-45 = dynamic diagonal energy.

detail0–1

Fine secondary turbulence layered on the main field. Higher = grainy textured storm clouds, lower = clean smooth poster bands. Keep below 0.6 for elegant looks.

glow0–1

Strength of the slowly drifting bright hotspot that anchors the composition. Higher = strong luminous focal core pulling the eye, 0 = even ambient field with no focal point.

matrix3 options

Bayer matrix size. 8 = smooth classic newspaper halftone with the most tonal nuance, 4 = visible crosshatch texture, 2 = coarse stark checkerboard for maximum retro crunch.

imageImage

optional https image halftoned through the dither screen instead of the procedural field (cover-fit) — the classic risograph-print photo treatment; leave empty for the flowing abstract field

Frequently asked questions

Yes. You can preview the dithering effect for free in the AIDesigner effects library — no watermark and no sign-up required to try it.

Use "Remix this effect" to tune the colors, speed, and parameters, then use the preview as a reference for your website background implementation.

It renders on the GPU through WebGL at a capped frame rate, so it is far lighter than a background video and automatically stops drawing when it scrolls out of view — keeping load and battery impact low.

Yes. Every knob in the "Make it yours" section is adjustable, and you can also just ask the AI in plain language — for example "slower and more blue" — and it retunes the dithering effect to match.

More effects

View all