CSS gradient generator
Design a linear, radial or conic CSS gradient with 2 to 8 color stops, preview it live and copy the ready-to-paste CSS.
- Runs in your browser
- No upload
- Result stays on your device
Privacy & limitsRuns in your browser. Nothing is uploaded.
Input content stays in this tab; Refentra does not upload or store it. Optional aggregate action counts are sent only with your usage consent. Clear the workspace when finished.
Supported profile: 2–8 opaque sRGB HEX stops in ascending 0–100%; linear/radial/conic, visual preview and CSS.
Maximum text: 200,000 UTF-16 units; parser limits can be smaller. Worker time limit: 15 seconds (regex 1.5 seconds).
Check the input and the result
- Prepare and choose the operation
Choose a linear, radial or conic gradient, and give the color stops in order, with an angle that suits that type.
- Check a concrete example
Use this sample and compare the indicated result: linear, angle=90, colors="#000000,#ffffff", positions="0,100" → linear-gradient(90deg, #000000 0%, #ffffff 100%)
- Check the output before you reuse it
Copy the generated CSS value into the background declaration where you want it, and check the gradient at the element’s actual size.
Answers for this task
Does a gradient preserve text contrast everywhere?
No. Contrast changes across the surface. Check the weakest background behind each text area, not only the endpoints.
What should I check if the input fails?
Use 2–8 opaque hex colors with stop positions that increase from 0 to 100. Reorder the stops yourself instead of relying on the browser to correct them.
Where does this tool stop?
This generates a CSS background value. It is not an image export, an animated gradient or proof that it will look identical on every display.