CSS Gradient Generator
Build linear and radial gradients with copy-ready CSS.
Input
This tool runs entirely in your browser. The data you paste or load is never uploaded.
Result
Enter your input, then run the tool.
About this tool
Compose a gradient from two to four colour stops, set the angle or choose radial, and copy the CSS. The preview updates as you change stops so you can judge the blend before using it.
How to use it
- Pick the gradient type and angle.
- Choose each colour stop and where it sits.
- Copy the CSS or the Tailwind-style arbitrary value.
Frequently asked questions
Why do gradients look banded?
Eight-bit colour steps can band in large areas. Adding a subtle noise overlay or using a slightly different palette reduces it.
Which angle direction does 90deg mean?
In CSS, 0deg points up and angles increase clockwise, so 90deg runs to the right.
Keep going
Related tools
CSS Box Shadow Generator
Design layered shadows and copy the CSS.
CSS Border Radius Generator
Shape corners with independent radii and copy the CSS.
Color Palette Generator
Generate harmonious palettes from one base colour.
HEX to RGB Converter
Convert HEX colour codes to RGB and HSL.
RGB to HEX Converter
Convert RGB channel values into a HEX code.
RGB to HSL Converter
Convert RGB channels to hue, saturation and lightness.