Color Picker and CSS Gradient Generator
Color Picker and CSS Gradient Generator
Pick two or three colours, set the direction, and copy ready-to-paste CSS.
The Color Picker and CSS Gradient Generator builds smooth colour blends and hands you the exact CSS to use them. Gradients give headers, buttons, and hero sections depth that flat colour cannot, but writing gradient syntax from memory, especially angles and multi-stop blends, invites trial and error. Here you simply pick colours and watch the preview respond.
Choose two colours, or tick the box to blend through a third in the middle. Switch between linear gradients, which flow in a straight direction controlled by the angle slider, and radial gradients, which bloom outward from the centre. Every change updates the large preview and the CSS output together, so what you see is literally the code you copy.
The generator uses the standard CSS gradient functions supported by every modern browser, with no prefixes or fallbacks to untangle. It runs fully in your browser; nothing is uploaded and no account is needed.
How to use
- Pick your first and second colours.
- Optionally enable the third colour for a three-stop blend.
- Choose Linear or Radial, and set the angle for linear gradients.
- Check the preview, then click Copy CSS.
- Paste the CSS into your stylesheet or style attribute.
Frequently asked questions
What does the angle mean?
For linear gradients, the angle sets the direction of the blend: 0 degrees flows upward, 90 degrees flows to the right, and 180 degrees flows downward. The slider lets you find any direction by eye.
Where do the three colours sit?
The first colour starts the gradient, the optional third colour sits in the middle, and the second colour finishes it, each taking an equal share unless you later adjust the stops in code.
Will this gradient work in all browsers?
Yes. Linear and radial gradients in this standard syntax are supported by all current browsers without vendor prefixes.
Is anything uploaded?
No. The generator runs locally in your browser.