Design a gradient with a live preview, then copy the CSS.
Create smooth linear or radial CSS gradients for backgrounds, buttons and hero sections. Add as many colour stops as you like, slide their positions and set the angle, then copy the generated background rule. Everything updates live and runs in your browser.
A CSS gradient is a smooth transition between two or more colours, generated by the browser with no image file needed, which keeps pages fast. The two main types are linear (colours blend along a straight line at an angle you choose) and radial (colours blend outward from a centre point). The tool above lets you build one visually and copies the CSS, so you can drop it straight into a stylesheet.
Colour stops give you control. A gradient is defined by colour stops, points along the line where a colour is fully itself; the browser blends between them. Moving a stop shifts where the transition happens, and adding more stops creates multi-colour effects. Placing two stops close together makes a sharp band rather than a soft blend, which is how you get stripe and hard-edge effects.
Using them well. Subtle gradients add depth to buttons, headers and backgrounds without the weight of an image. Keep the colours close in hue for a tasteful look; wildly different colours can clash. Because gradients are code, they scale to any screen size crisply and can be animated, which a static image cannot.