CSS Gradient Generator Color
Design a linear or radial gradient and copy the CSS.
CSS Gradient Generator is a free online tool that design a linear or radial gradient and copy the CSS. It runs entirely in your web browser using plain JavaScript, so files are processed on your own device and never uploaded to a server. There is no sign-up, no file size limit imposed by the site, no watermark and no paid tier.
- Price
- Free — no account, no quota, no watermark
- Category
- Color
- Where it runs
- In your browser, on your device
- Files uploaded
- None
- Technology
- plain JavaScript
- Settings
- 5
- Works offline
- Yes, after the first visit
About CSS Gradient Generator
CSS Gradient Generator is one of 14 color tools on DuckyTools, and like all of them it runs entirely inside this page. Design a linear or radial gradient and copy the CSS.
How to use it
- Enter start color, end color and type.
- Adjust the remaining 2 settings if the defaults do not fit your case.
The 5 settings
| Setting | What it does | Default |
|---|---|---|
| Start color | A color, picked from your system color picker. | #FFD84D |
| End color | A color, picked from your system color picker. | #FF8A3D |
| Type | Choose from 3: Linear, Radial, Conic. | Linear |
| Angle | Range 0–360°. | 135° |
| Color stop position | Range 0–100%. | 50% |
Under the hood
| Runs on | plain JavaScript — runs the whole thing |
| Controls | Start color, End color, Type, Angle, Color stop position |
Questions
What does the type option change?
It offers 3 choices — Linear, Radial and Conic. The default is Linear, which suits most cases; change it when your input or your destination calls for something specific.
What are the limits on angle?
It accepts 0 to 360°, starting at 135°. The other numeric controls have their own ranges: color stop position 0–100%.