UTILS.
100% in-browser
◐◑

Duotone Generator

Create a two-color duotone gradient with copyable CSS.

Click the CSS output to copy it.

About this tool

Pick a shadow and highlight color to build a two-color duotone gradient with a live preview and ready-to-copy CSS, all in your browser.

Frequently asked questions

What CSS does it output?
It generates a linear-gradient() background going from the shadow color to the highlight color at your chosen angle.
How do I copy the CSS?
Click the output box and the full background declaration is copied to your clipboard.

More tools