Duotone

듀오톤

Collapsing a photo to greyscale, then tinting shadows toward one colour and highlights toward another — the look Spotify made famous on cover art.

Also known as: Two-tone imageSpotify duotone

···

html

<div class="wrap"><div class="photo"></div><div class="tone"></div></div>

css

.wrap{position:relative;width:min(300px,85%);aspect-ratio:4/3;border-radius:16px;overflow:hidden}
.photo{position:absolute;inset:0;
  background:radial-gradient(circle at 50% 32%,#fff 0 16%,#999 17% 42%,#333 43% 100%);
  filter:grayscale(1) contrast(1.1)}
.tone{position:absolute;inset:0;mix-blend-mode:color;background:linear-gradient(160deg,#ff5c8a,#5b5bf7);
  filter:hue-rotate(0deg);animation:hue 6s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}

Strip a photo to greyscale with filter: grayscale(1) to keep only luminance, then lay a two-colour gradient over it with mix-blend-mode: color — shadows pull toward the gradient's first colour, highlights toward the second.

An SVG feColorMatrix/feComponentTransfer pipeline is more precise, but a CSS filter plus a blend-mode gets close enough for most real work.

When to use

Use for album covers, event posters, or giving a set of team photos a unified look. Avoid it for product photography where true colour matters.