Gradient maker
Find a blend you love. Copy the CSS.
- 1Add input
- 2Adjust settings
- 3Get your result
Tool input and files are processed in this browser without being uploaded.
Before you start
Build a linear or radial CSS gradient from validated color stops and positions. Stops are sorted by position, and preview and copied CSS use the same generated value.
How to use this tool
- Adjust at least two color stops and their positions; add more if needed. The JSON editor is available for precise edits.
- Choose linear or radial. For a linear gradient, set its angle before selecting “Generate gradient CSS”.
- Inspect the preview, then copy or download the CSS.
Supported inputs and limits
Pasted text is limited to 1 MiB; review the result before using it.
Worked example
Example input
[{"color":"#000","position":100},{"color":"#fff","position":0}]Example options
{}Example output
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
When something does not work
Use the documented input format and keep values within the displayed limits. Review the result before using it in another document or application. Editing the input marks the previous result as stale; a failed run clears it.
Frequently asked questions
Are my files uploaded?
No. Files and tool input are processed in your browser. Moving around the site can keep a temporary workspace in the same tab. Refreshing or closing the tab clears it, so download results you want to keep.
What should I check in this result?
Build a linear or radial CSS gradient from validated color stops and positions. Stops are sorted by position, and preview and copied CSS use the same generated value.
Documentation & further reading
Related tools
Color converter
Same color. A different format.
Contrast checker
Check the contrast between text and background colors.
Palette and color mixing
Generate rule-based palettes or compare weighted RGB color mixtures.
CSS shadow and radius
Compose layered shadows with optional individual border-radius values.