Duotone Generator
Blend two colours into a duotone ramp and CSS gradient.
How to use
- 1 Choose a shadow colour and a highlight colour.
- 2 Set how many steps the ramp should have.
- 3 Adjust the gradient angle to suit your layout.
- 4 Copy the generated CSS or pick individual swatches.
About Duotone Generator
The Duotone Generator builds the classic two-colour look — a dark shadow tone fading into a bright highlight tone — that designers map onto photographs and use for bold, modern backgrounds.
You pick a shadow colour and a highlight colour, and the tool interpolates a smooth ramp of intermediate shades between them, plus a ready-to-paste CSS linear-gradient.
Two controls shape the result.
The step count decides how many discrete swatches the ramp is divided into, useful when you want to sample exact mid-tones for a palette or a posterised effect.
The angle control rotates the CSS gradient so you can match the direction of light in a layout.
A live preview band shows the blend instantly, and each swatch is labelled with its hex value so you can lift individual colours into your own design system.
The maths uses straightforward linear RGB interpolation, which keeps the relationship between the endpoints predictable and easy to reason about.
Everything runs locally in your browser, with no uploads and no tracking, so it stays fast and private — and it keeps working offline once the page has loaded.
Copy the gradient declaration and drop it straight into your stylesheet.
FAQ
How are the in-between colours calculated?
They are linearly interpolated in RGB space between your shadow and highlight colours, giving an even, predictable blend across the chosen number of steps.
Can I use this for a real duotone photo effect?
The ramp gives you the exact colours to map dark and light image tones onto. Apply them as a gradient map in your editor, or use the CSS gradient directly as a background.