Gradient Maker
WEBDesign CSS gradients and copy the code in one click.
What is the Gradient Maker tool?
Design a CSS gradient visually and copy production-ready code in one click. This css gradient generator supports linear and radial gradients with up to six colour stops: pick your colours, position each stop, set the angle, and the tool writes the background declaration for you. It covers the common jobs — a hero background gradient, a button hover, a subtle card wash or a bold poster backdrop — with none of the ad clutter that surrounds most gradient sites.
Under the hood a CSS gradient is one line of code: linear-gradient(angle, colour stops) paints colours along a direction, while radial-gradient(circle, colour stops) blends them outward from the centre. The generator builds that line live as you edit, so the preview you see is exactly the code you copy — paste it into any stylesheet, Tailwind config or inline style and it just works.
Everything runs in your browser: nothing is uploaded, no account is needed, and there are no locked presets or export caps — every control is free. The page works on a phone as well as a desktop. Use it together with Carbide's color picker: choose your brand colour and its HEX code there, then bring it here to build a background gradient around it.
How to use the Gradient Maker
- Choose linear or radial as the gradient type.
- Pick a colour for each stop — add up to six stops for more complex blends.
- Drag each stop's position to control where the colours blend into each other.
- For a linear gradient, set the angle to control the direction of the blend.
- Copy the generated CSS with one click and paste it into your stylesheet.
Frequently asked questions
How do I copy the CSS code?
Click the copy button and the full background declaration — for example background: linear-gradient(90deg, #FF4D00 0%, #2F6BFF 100%); — goes to your clipboard, ready to paste into any stylesheet or style attribute.
What is the difference between a linear and a radial gradient?
A linear gradient blends colours along a straight line at the angle you choose — good for backgrounds and buttons. A radial gradient blends outward from the centre in a circle — good for glows and spotlight effects. You can switch between them with one tap and keep the same colours.
Can I export the gradient as an image?
The tool outputs CSS code rather than an image file. For web work the code is better — it scales to any size with zero file weight. If you need a picture of the gradient, apply the CSS to an element and take a screenshot.
How many colours can I use in one gradient?
Between two and six colour stops. Two stops make a clean blend; more stops let you build sunset-style or multi-brand gradients.
Is the gradient generator free?
Yes — fully free with no sign-up, no locked presets and no limit on how many gradients you build or copy.
Is anything uploaded or tracked about my design?
No. The generator runs entirely in your browser; your colours and code never leave your device.
Does it work on my phone?
Yes. The controls work in mobile browsers, so you can design a gradient and copy the CSS from your phone.
