◈Free
CSS gradient generator
Generate a validated multi-stop linear gradient.
Generate a validated multi-stop linear gradient. Enter two to twenty HEX colors and an angle to build a linear-gradient declaration. Color stops are evenly spaced from zero to one hundred percent.
How to use
- Enter your text, values, or image.
- Adjust the options and run the tool.
- Copy or download your result.
Worked example
Example input
Hex colors, comma-separated: #ff0000,#0000ff Angle degrees: 90
Example result
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
Limitations and details
Only linear gradients and evenly spaced stops are generated; custom stop positions, alpha colors and radial gradients are unsupported.
Inputs and options
- Hex colors, comma-separated
- Text
- Angle degrees
- Number · Minimum: -360 · Maximum: 360
Frequently asked questions
Is this tool free and private?
Yes. All 300 tools are free in this phase. Processing happens in your browser; your input and files are not sent to our servers.