Gradient Generator
Blend two colours into a smooth gradient, preview it instantly, and copy the ready-made CSS to use in your own designs.
Choose Two Colours
Gradient Preview
Colour Stops
Five evenly spaced colours sampled along the gradient.
How to Use the Gradient Generator
Enter a start colour and an end colour as HEX codes, or use the Random Colours button. The preview bar updates instantly to show the blend between them, the box underneath shows ready-to-use CSS, and the row of stops shows five evenly spaced colours sampled along the way.
How the Maths Works
Each colour stop is calculated by blending the Red, Green and Blue channels of your two colours in a straight line: at the halfway point, each channel is exactly halfway between the start and end values, and so on along the gradient. This is the same linear interpolation method browsers use internally to render a CSS linear-gradient.
Using Gradients in Your Creative Work
Smooth colour blends are useful well beyond web design — they can inform a soft watercolour wash, a sky or background transition in digital painting, or a shaded backdrop for product photography of your work. Sampling the colour stops from a gradient you like can also give you a ready-made mini palette with guaranteed smooth transitions between each colour.
Examples
Frequently Asked Questions
What does the Gradient Generator do?
It blends two colours you choose into a smooth gradient, shows you a live preview, and gives you ready-to-use CSS code for the blend.
How is the gradient calculated?
The tool blends the Red, Green and Blue channels of your two colours in a straight line, so each point along the gradient is a proportional mix of the start and end colours.
What are the colour stops underneath the preview?
They are five evenly spaced colours sampled along your gradient, from the start colour to the end colour, giving you a quick mini palette from the blend.
Can I copy the CSS code?
Yes. Click Copy CSS to copy the linear-gradient code straight to your clipboard, ready to paste into a stylesheet.
Can I use these gradients outside of web design?
Yes. The colour stops can work as a reference for a smooth colour wash, a background transition in a digital painting, or a shaded backdrop, even if you never touch the CSS code.
Can I swap the two colours?
Yes. Click Swap Colours to reverse the direction of the gradient without retyping either HEX code.
Can I use the keyboard instead of a mouse or touchscreen?
Yes. Tab between the two HEX fields and the Swap, Random and Reset buttons, all of which are fully keyboard operable.
Can I use this tool on my phone or tablet?
Yes. The preview bar, code box and colour stops all resize to work comfortably on phones and tablets as well as desktop screens.
Is my colour data stored or sent anywhere?
No. All gradient calculations happen directly in your browser. Nothing you type is sent to a server or stored.
Is this Gradient Generator free to use?
Yes, it's completely free to use, with no account, sign-up or download 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 KitsDigital colour results are provided for planning and educational purposes. Screens, printers, paint brands, pigments, paper and lighting can change how a colour appears. Test important colours before using them in a final artwork or print project.