Gradient Map
Enter CSS colors and positions to generate a local gradient snippet.
A QUICK WALKTHROUGH
How to use this tool
- Enter 2–8 CSS color stops with percentage positions.
- Generate and review CSS and SVG output.
- Copy the local output into your project.
Stop input
Enter 2–8 lines, each containing a CSS color and a percentage position, such as #111111 0% and #eeeeee 100%. The tool validates colors and bounds positions to 0–100%.
Two local outputs
The tool generates a CSS linear-gradient declaration and an SVG linearGradient stop fragment. It does not include an image palette or unverified preset colors.
Local processing
Gradient text is generated in your browser and is not uploaded.
GOOD TO KNOW
Common questions
How many stops can I use?
Use between 2 and 8 stops.
Which colors are accepted?
Valid CSS hex, rgb/rgba, and hsl/hsla colors are accepted by the browser.
Does it provide a preset palette?
No. You provide the colors and positions.