Duotone Gradient Maker
Create a smooth two-colour duotone gradient and copy the CSS.
Two colours, blended
A duotone gradient blends between two colours in a smooth fade, a clean and versatile background or accent that pairs beautifully with modern design. This creates one from your two colours and copies the CSS, so you get a simple, striking two-tone blend ready to use.
Pick two colours and copy the duotone gradient CSS.
Why two-colour gradients work so well
A two-colour gradient is often the most effective kind precisely because it is simple: two well-chosen colours blending cleanly avoid the muddy middle that gradients between many or clashing colours can produce, and the result feels intentional and modern. The choice of the two colours sets the whole mood, from calm and cool to warm and energetic. These gradients suit hero backgrounds, buttons and overlays, and pair naturally with the duotone photo treatment for a coherent look across a design. As with any coloured background, keeping text readable over it is worth a glance. A clean duotone gradient is one of the most reliable ways to add colour and depth without risking a busy result.
Common questions
Why are two-colour gradients so effective?
Their simplicity — two well-chosen colours blend cleanly without the muddy middle that gradients between many or clashing colours can produce.
What sets the mood of a duotone gradient?
The choice of the two colours — from calm and cool to warm and energetic — so picking them thoughtfully defines the whole feel.
Is anything uploaded?
No. The CSS is generated in your browser.