Build a linear or radial gradient and copy the CSS.
This tool builds a CSS gradient visually — pick linear or radial, choose two colors, and for linear gradients set the angle — and outputs the exact background: linear-gradient(...) or radial-gradient(...) declaration to paste into your stylesheet.
Gradients are a lightweight way to add depth or brand color to a background, button, or card without an image file, and they scale losslessly to any screen size, unlike a raster image.
The live preview updates as you adjust each control, so you can fine-tune the angle and colors before copying the final CSS — useful for matching a gradient to a specific brand palette without repeatedly editing and reloading a stylesheet to see the result.
Not in this version — it generates a simple two-color gradient. Multi-stop gradients can be built by extending the generated CSS manually.
Linear gradients transition along a straight line at a set angle; radial gradients transition outward from a center point in a circular or elliptical shape.
Yes, linear-gradient and radial-gradient are supported in all modern browsers without vendor prefixes.