CSS Gradient Generator
Build linear or radial CSS gradients with two or three colour stops and a live preview.
Workspace
—
How to use this tool
Choose the gradient type, colours, stop positions and angle. Copy the generated CSS declaration.
What to know
Stop positions are percentages of the gradient. Keep sufficient contrast between the gradient and any overlaid text.
Frequently asked questions
How do I use CSS Gradient Generator?
Choose the gradient type, colours, stop positions and angle. Copy the generated CSS declaration.
What should I check before using the result?
Stop positions are percentages of the gradient. Keep sufficient contrast between the gradient and any overlaid text.
Is an account required?
No. This tool is free and the calculation takes place in your browser.