CSS DUOTONE EFFECT GENERATOR

Example output (default settings)

.duotone {
  filter: url(#duotone);
}

<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <filter id="duotone" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0"/>
    <feComponentTransfer>
      <feFuncR type="linear" slope="1.1" intercept="-0.05"/>
      <feFuncG type="linear" slope="1.1" intercept="-0.05"/>
      <feFuncB type="linear" slope="1.1" intercept="-0.05"/>
    </feComponentTransfer>
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.106 1"/>
      <feFuncG type="table" tableValues="0.078 0.416"/>
      <feFuncB type="table" tableValues="0.392 0.208"/>
    </feComponentTransfer>
  </filter>
</svg>

<img class="duotone" src="photo.jpg" alt="Your image">

How to make a duotone image

1. 1

   Optionally choose an image from your device to preview, or keep the sample scene.

2. 2

   Pick a shadow color and a highlight color, or start from a preset pair.

3. 3

   Adjust contrast and brightness until the result looks right.

4. 4

   Copy the CSS and the SVG filter, paste the filter once into your page, and add the duotone class to any image.

Questions

How does the CSS duotone effect work?

The image is first converted to grayscale with luminance weights. An SVG feComponentTransfer then maps each gray level onto a straight line between your shadow color and your highlight color, separately for the red, green and blue channels. Black becomes the shadow color, white becomes the highlight color, and everything in between blends.

Why an SVG filter instead of mix-blend-mode?

Blend-mode tricks (grayscale plus a lighten or multiply overlay) only approximate a duotone and break when the shadow color is lighter than the highlight in any channel. The SVG filter maps every channel exactly, needs no extra overlay element, and works on images, backgrounds and videos alike.

Where do I put the SVG filter?

Paste the hidden <svg> block once anywhere in the page body, then reference it with filter: url(#duotone). It must be in the same document as the element using it. If you want several duotones, give each filter its own id and class.

Which browsers support it?

Referencing an inline SVG filter from CSS works in all current versions of Chrome, Edge, Firefox and Safari. The filter id has to live in the same HTML document; external SVG files are not reliable across browsers.

Is my image uploaded anywhere?

No. A picture you choose is shown through a temporary local URL in your browser and never leaves your device. The generated code does not contain your image either.

Related tools

• CSS Wave & Shape Divider GeneratorBuild a wave, curve, slant, zigzag, or arc divider between page sections with an inline SVG and copy the HTML and CSS.
• CSS Image Hover Overlay GeneratorBrowse zoom, dim-with-caption, slide-up caption, and icon-reveal hover overlays for images, and copy the CSS.
• CSS Filter GeneratorDial in blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, and sepia with a live preview.
• CSS Halftone GeneratorBuild a halftone dot pattern in pure CSS with adjustable dots, colors, offset grid, and fade, then copy the code.
• CSS CRT / Scanlines / VHS GeneratorBuild a retro CRT screen overlay with scanlines, vignette, phosphor tint, and flicker animation, then copy the CSS.
• CSS Skeleton Loader GeneratorDesign a skeleton loading placeholder with a shimmer or pulse animation, custom colors, speed, and radius, then copy the HTML and CSS.
• CSS Clip-Path GeneratorDrag points on a live preview to build a clip-path: polygon() shape from a preset or from scratch, and copy the CSS.
• CSS Ripple Effect GeneratorDesign a Material-style click ripple for buttons with custom color, opacity, duration, and easing, then copy the CSS and JavaScript.