Choose Color
CSS Gradient Generator
Build linear or radial two-color CSS gradients; Generate posts to /web-tools/GenerateCssGradient with your chosen colors—live preview may update in the browser.
Generated CSS Gradient
Tips
Your colors are used
Generate sends the start and end colors you picked; the CSS is not filled with random colors.
Linear and radial only
Type must be linear or radial. Conic gradients are not generated by this tool.
Preview vs Generate
Live preview may update in the browser as you change options; Generate still POSTs to Toolomix for the final CSS string.
Two color stops
The request supports startColor and endColor. For multi-stop gradients, copy the CSS and add stops manually.
Server Generate endpoint
Generate posts to /web-tools/GenerateCssGradient with direction, type, startColor, and endColor.
Linear and radial types
CssGradientRequest type accepts linear or radial only—no conic.
User-chosen colors
The colors you select (or apply from a preset) are sent and used in the returned CSS.
Optional live preview
The UI can show a client-side preview while you tune options before calling Generate.
What this tool does
CSS Gradient Generator helps you build a two-color linear or radial CSS gradient and copy the resulting background value.
Generate sends your direction, type, and colors to Toolomix (/web-tools/GenerateCssGradient). Live preview may update client-side as you change controls.
How to use
Choose type and direction
Select linear or radial, then a direction (for linear) or shape such as circle/ellipse (for radial).
Set start and end colors
Pick colors with the pickers or apply a quick preset; those values are what Generate will use.
Generate and copy
Click Generate to POST to Toolomix, then copy the returned CSS into your stylesheet.
Supported inputs and output
Input: gradient type (linear|radial), direction/shape string, and two color values. Output: CSS gradient syntax based on those parameters.
This is not a file converter and does not use the image/PDF upload middleware.
Processing and privacy
Generate POSTs your settings to Toolomix at /web-tools/GenerateCssGradient. That step is not browser-only.
Live preview may still run in the browser. See the Privacy Policy for how requests and logs are handled.
Limitations
Known limits
- No conic gradients
- Two color stops (start and end) only in the request model
- Generate requires a successful server response
- Not a full design system or multi-layer background builder
Troubleshooting
If Generate fails, check your network connection and retry; the button depends on /web-tools/GenerateCssGradient responding successfully.
If the preview looks right but copy fails after Generate, re-run Generate and use Copy CSS on the returned result.
Frequently Asked Questions
Is Generate browser-only?
No. Generate POSTs a CssGradientRequest to /web-tools/GenerateCssGradient on Toolomix. Live preview may still update in the browser without that call.
Which gradient types are supported?
Linear and radial only. Conic is not available.
Are the colors random?
No. The start and end colors you choose are sent in the request and used in the CSS output.
What fields does the API expect?
direction, type (linear|radial), startColor, and endColor on CssGradientRequest.
Can I use more than two colors?
The generator produces a two-stop gradient. Use the output as a starting point and add extra stops in your stylesheet if needed.
Do I upload a file?
No. You configure options in the form; there is no file-upload workflow for this tool.
Will the CSS work in modern browsers?
linear-gradient and radial-gradient are widely supported in current browsers. Always verify in your target environments.
Try Other Free Tools
Try it now
Pick type, direction, and colors, then Generate to get CSS from Toolomix using your selections.
