Image FXcssimagelab.com
Filter · 25 / 56

Riso Print

Two flat spot-color ink plates that don't quite register, with visible offset fringing — a Risograph misprint.

Image
Green natural landscape

Hover the photo to apply the effect — move away to compare.

Adjust
5px
Metadata
interaction
Always on
browser
Enhanced — SVG filter
reduced motion
static
touch fallback
Identical on touch
Edit the CSS above — the preview updates live.

About Riso Print

Riso Print fakes a two-color Risograph misprint: the sharp <img> and a ::before duplicate (via --ifx-src) are each remapped to a flat spot-ink by an SVG filter (luminance then per-channel table toward the ink color, white at highlights), multiply-blended over a paper background, with the ::before plate physically offset by --ifx-riso-shift to give the tell-tale registration fringe. Pick --ifx-riso-a / --ifx-riso-b from the ink presets (SVG attrs can't read CSS vars, so inks are baked filter ids), --ifx-riso-shift for the misregistration, and --ifx-riso-paper for stock color. IMPORTANT: include the inline <svg> <filter> block once per page (ids must stay unique). Fully static: identical on touch, nothing to reduce for prefers-reduced-motion.

Use cases

  • editorial
  • branding
  • poster
  • portfolio

Browser support

Enhanced — SVG filter. This effect uses an enhanced feature — provide a graceful fallback for older browsers.

Accessibility

  • Essential content is never hidden behind hover.
  • No motion — nothing to reduce.
  • Touch fallback: identical on touch.