Two-Colour Gradient & Ombre Generator
Blend smoothly between two colours to generate a step-by-step gradient palette or ombre effect, complete with hex codes and ready-to-use CSS.
Choose Your Colours
Gradient Result
CSS Gradient Code
How to Use This Tool
Choose a start and end colour using the pickers or by typing hex codes, then drag the slider to choose how many steps you want in the gradient. The tool generates a smooth colour strip, a set of individual hex swatches, and ready-to-use CSS gradient code.
Example
Blending from a deep blue (#2547A0) to a warm gold (#F6C445) over seven steps produces a soft ombre passing through muted teals and purples in between, useful as inspiration for a watercolour wash, a fade in a hand-lettered banner, or a website hero background.
Using This for Ombre Painting
The individual swatches can act as a step-by-step mixing guide for an ombre or gradient wash: mix your start colour, your end colour, and then blend intermediate ratios to match each swatch as you move across your piece.
Using the CSS Code
The CSS gradient code can be pasted directly into a stylesheet or website builder that accepts custom CSS to recreate the exact same gradient digitally.
Frequently Asked Questions
What does this tool do?
It blends smoothly between two colours you choose, producing a set of in-between hex swatches and matching CSS gradient code.
How many steps can I generate?
You can choose anywhere from 3 to 12 steps using the slider.
Can I use this for painting an ombre effect?
Yes. Treat each swatch as a target mix as you blend from your start colour to your end colour across a piece.
What is the CSS code for?
It is a ready-to-use linear-gradient CSS snippet you can paste into a stylesheet or a website builder that accepts custom CSS.
How is the blend calculated?
It uses simple linear interpolation between the red, green and blue channels of your two chosen colours.
Can I copy individual hex codes?
Yes, each swatch has its own Copy button next to its hex code.
Does the order of my two colours matter?
It only affects the direction of the gradient, not which colours appear in it.
Is this tool free to use?
Yes, this tool is completely free to use with no sign-up required.
Related Colour Tools
Ready to Create with Colour?
Explore beginner-friendly Creative Flair by Sana painting kits with carefully selected colours and approachable step-by-step guidance.
Explore Painting KitsGradient swatches are calculated using simple linear interpolation in RGB colour space, a standard and widely used method for generating digital colour gradients.