What it does
UIX Draft’s free gradient tool previews linear, radial and conic backgrounds. Each colour stop has its own colour and position, with a CSS copy action that needs no signup.
Select the gradient type first: a straight transition, a centre-outward blend or a rotation around a point. Add colour stops and set their positions while watching the preview. The linear type also provides an angle control from zero to 360 degrees.
Copy CSS transfers the complete background property. The guide explains how to place a gradient before an image URL in a layered background, so the gradient becomes the overlay. An optional email form can send the CSS for later use; it is separate from copying the code.
The generator is a free tool alongside UIX Draft’s paid templates and course. Those products have their own purchase terms and do not need to be bought for this gradient workflow.
Strengths
- Editable stop positions control where colours change.
- The output is a complete CSS background property.
- Copying CSS does not require signup.
Best for
- Creating a CSS gradient or image overlay
Sources
- UIX Draft gradient controls and guide (Oct 27, 2026)
- UIX Draft paid-product terms (Oct 27, 2026)