Build a linear gradient from two colors and an angle and copy the exact CSS declaration. Defaults are a purple-to-pink 135° gradient, and every value is editable, so you can match a brand palette and hand the result straight to a developer without redrawing it in a design tool.
🔒 Your file is processed locally in your browser whenever supported. This tool runs entirely on your device — nothing you type or upload is sent to a server, logged, or stored.
0deg points up, 90deg points right, 180deg points down and 270deg points left. A 135deg gradient runs from the top-left toward the bottom-right.
This generator produces two-stop gradients. For three or more stops, extend the output by hand, for example linear-gradient(135deg, #4f46e5, #a855f7 50%, #ec4899).
No. It generates linear gradients only. The same color values and angle logic are the most common use case, and the CSS is easy to adapt for other gradient types.
No. Generation is local; copy the CSS and keep it in your own project.
| Platform | Supported | Offline | Local | Server | Network |
|---|---|---|---|---|---|
| WEB | Yes | Yes | Yes | No | Not required |
| PWA | Yes | Yes | Yes | No | Not required |
| ANDROID | Yes | Yes | Yes | No | Not required |
| IOS | Yes | Yes | Yes | No | Not required |
Pick any color and get its HEX, RGB and HSL codes plus tints, shades and its complement.
Generate harmonious color palettes — complementary, analogous, triadic or surprise me.
Convert between HEX, RGB and HSL color formats.
Craft box-shadow values with blur, spread and color.
Advertisement