Click the bar to add a stop · drag a stop down to remove it.
What Is the Gradient Maker?
The Gradient Maker is a free online tool for building beautiful CSS gradients visually, without writing a single line of code. Instead of guessing hex values and angles by hand, you pick your colors on an interactive bar, watch the result update live in a large preview, and copy clean, ready-to-paste CSS when you are happy with it.
It supports linear, radial, and conic gradients, unlimited color stops, precise position control, and adjustable rotation. Whether you are designing a hero section, a button, a card background, or an entire brand palette, the Gradient Maker gives you production-ready code in seconds. Every gradient you create is standard CSS, so it works in any website, web app, or framework that supports CSS.
How to Use the Gradient Maker
- Choose a color stop. Click one of the round handles on the gradient bar to select it. The selected stop is outlined in blue.
- Set its color. Type a hex value in the Color field, or click the color swatch to open the visual color picker.
- Add more colors. Click anywhere on the gradient bar to drop a new stop. It is created with the color sampled at that point, and you can drag it left or right to reposition.
- Remove a color. Drag any stop downward off the bar to delete it (you always keep at least two), or select it and press Delete.
- Fine-tune the position. Select a stop and enter an exact percentage in the Position field for pixel-perfect placement.
- Adjust the rotation. Use the Rotation control to set the angle of a linear or conic gradient.
- Pick a gradient type. Switch between Linear, Radial, and Conic to completely change the look.
- Preview and export. The large panel on the right shows your gradient in real time — click the expand icon for a fullscreen view. When you are ready, click Copy CSS, or use the dropdown next to it to copy the gradient function only, a
background-imagerule, or just the list of hex colors.
Want to start fresh? Hit the Random button to generate a brand-new color palette instantly — a fast way to discover combinations you might not have thought of.
Frequently Asked Questions
Is the Gradient Maker free to use?
Yes. The Gradient Maker is completely free, with no sign-up required. Create as many gradients as you like and copy the CSS whenever you need it.
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors, generated directly by the browser. Because it is rendered as code rather than an image, a gradient stays crisp at any size, loads instantly, and never increases your page weight with an extra file.
What is the difference between linear, radial, and conic gradients?
A linear gradient blends colors along a straight line at the angle you set. A radial gradient radiates outward from a center point in circles. A conic gradient sweeps the colors around a center point like the hands of a clock. You can switch between all three using the Type control and compare them instantly in the preview.
How do I add more than two colors?
Click anywhere on the gradient bar to add a new color stop. Each new stop can be recolored and repositioned, so you can build multi-color gradients with as many stops as you need.
How do I remove a color stop?
Drag the stop you want to remove downward, away from the bar, and release. You can also select a stop and press the Delete key. A gradient always keeps a minimum of two colors.
How do I change the gradient direction or angle?
Use the Rotation control to set the angle in degrees. For example, 90° runs the colors left to right, while 180° runs them top to bottom. Rotation applies to linear and conic gradients.
Can I use these gradients in Tailwind, Figma, or my own website?
Yes. The output is standard CSS, so you can paste it into any stylesheet, a style attribute, or a framework like Tailwind using an arbitrary value. In design tools such as Figma you can recreate the same look by matching the hex colors and stop positions shown in the tool.
Do CSS gradients work in all browsers?
Linear and radial gradients are supported in every modern browser. Conic gradients are supported in all current versions of Chrome, Edge, Firefox, and Safari, so they are safe to use on today’s web.
