Gradient Generator
9 toolsBuild a CSS linear-gradient visually.
Runs in your browser — your files and text stay on your device
Build a two-color CSS gradient visually and copy the code. Choose linear or radial, pick the start and end colors, and for linear set the angle. For more than two colors, add stops to the copied CSS by hand, and check gradients between very different hues since they can look muddy in the middle.
Picker & PaletteShade ScalePalette from ImageColor MixerGradient GeneratorContrast CheckerColor BlindnessNamed ColorsPalette Reference
background: linear-gradient(90deg, #3b82f6, #a855f7);How to use this tool
- 1Choose linear or radial.
- 2Pick a start and end color, and (for linear) an angle.
- 3Copy the generated CSS background value.
Frequently asked questions
What does the angle control?
It's the direction of a linear gradient — 0° points upward, 90° right, 180° down, matching CSS's linear-gradient() angle convention.
Can I use more than two colors?
This generates a simple two-color gradient. Add more comma-separated colors to the output manually for extra stops.
Is the gradient generated on a server?
No — it's plain CSS assembled locally in your browser.