CSS Gradient Generator
Choose linear, radial or conic, set the angle, add colour stops and drag them into place. Copy the CSS, or save the gradient as a PNG for a wallpaper or a slide background.
Linear gradients
A linear gradient blends along a line at the angle you set: 90 degrees runs left to right, 180 top to bottom. The CSS is written with the angle in degrees, which every current browser supports.
Radial and conic gradients
Radial gradients spread out in a circle from the centre. Conic gradients sweep round the centre like a colour wheel; the angle sets where they start. Both are supported in all current browsers.
Multi-stop gradients
Add as many colour stops as you like and move each one from 0% to 100%. Two stops at the same position make a hard edge, for stripes.
Copy the CSS
The CSS includes a plain background colour first, as a fallback for anything that cannot draw gradients, then the gradient itself.
Gradient ideas and presets
Six presets (Sunset, Ocean, Forest, Peach, Night and Candy) are a starting point; click one and adjust its colours.
Text to Result converter: free and online
Convert text to result in your browser: drop in a Text file and download the Result. The file is converted on your own device and never uploaded, so this text to result converter is safe for private and confidential files.
More conversions from Text: Text to PDF, Text to PDF, Text to PDF, Text to PDF, Text to PDF, Text to PDF.
Other conversions to Result: Text to Result, Text to Result, Text to Result, Text to Result, Text to Result, Text to Result.
People also search for
- text to result free
- text to result without losing quality
On the blog: How to Make a CSS Gradient Online, Step by Step
Reviews
No reviews yet. Used this tool? Yours could be the first.
Used this tool? Sign in to write a review.
Something not right with this tool? Raise a support ticket and a person will look into it.
Questions
How do I convert Text to Result?
Drop your Text file on this page, check the preview, and press Download. The Result is made in a few seconds, with no sign-up.
Is my Text file uploaded anywhere?
No. The text to result conversion runs in your browser, on your own device. The file never leaves it.
Can I download the gradient as an image?
Yes: as a PNG at 1920 x 1080, 1080 x 1080, 2560 x 1440 or 1080 x 1920.
Does the CSS need vendor prefixes?
No. Unprefixed linear-gradient, radial-gradient and conic-gradient work in every current browser.
Is anything uploaded?
No. The preview and the PNG are made in your browser.