Image FXcssimagelab.com
Image
Studio fashion portrait in warm light

Filter · 18 / 35

Duotone Map

A true gradient-map duotone that remaps shadows and highlights to two colors via an SVG filter.

Adjust
1.05
4px
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 Duotone Map

Duotone Map is a true gradient-map duotone: an SVG filter desaturates the image to luminance, then remaps shadows to color A and highlights to color B (the Fire preset is a tritone). Switch --ifx-duo between the pre-baked filter ids (SVG filter attributes can't read CSS vars, so palettes are presets) and layer --ifx-contrast on top. IMPORTANT: the effect needs both the CSS and the accompanying inline <svg> <filter> block in the DOM — the copied HTML/React bundles it; a CSS-only integration must add the <svg> once. Fully static: identical on touch, nothing to reduce for prefers-reduced-motion.

Use cases

  • editorial
  • branding
  • portfolio
  • hero

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.