Gradient Generator
9 toolsBuild a CSS linear-gradient visually.
Runs in your browser — your files and text stay on your device
Pick a color and get an instant palette, extract dominant colors from a photo, mix two colors, build gradients, check WCAG contrast, simulate color blindness, or browse a reference of named and Tailwind-style colors — all computed locally as you adjust each control.
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.