◐◑

Duotone Generator

Create a two-color duotone gradient with copyable CSS.

Your files stay on this device

Files are processed in your browser, never uploaded. The site downloads code and assets to run the tools. No accounts or trackers.

Use Download to save this tool as one HTML file for offline use.

Shadow

Highlight

Angle 135°

output

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.

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.