What is the difference between linear, radial, and conic gradients?

Linear transitions along a straight line. Radial radiates from a center point. Conic sweeps colors around a center point like a color wheel.

How do I add more than two colors to my gradient?

Click Add color stop. Pick a color and drag the position slider to place it.

How do I copy the CSS and use it in my project?

Click Copy CSS for the full property or Copy value only for just the gradient string.

What do the color stop positions mean?

Positions are percentages from 0 to 100 showing where each color is fully rendered along the gradient.

Gradient Generator Online Free

🎨 Image Design ✔ Free Forever

Gradient Generator Online Free

Create linear, radial, and conic CSS gradients with a live preview. Add multiple color stops, set angles, and copy the final CSS code with one click. No install needed.

✔ Linear gradients ✔ Radial gradients ✔ Conic gradients ✔ Multiple color stops ✔ Instant CSS output

All Image Design Tools

CSS Code

Gradient Type

Angle

135°

Color Stops

Presets

About This Tool

Why Use a Gradient Generator Online Free

Writing CSS gradients by hand is a pain. The syntax for multi-stop gradients with precise positions is verbose and hard to visualise without running the code. Getting a gradient to look exactly right takes many iterations of tweaking hex values and percentages.

This gradient generator online free lets you build gradients visually. Pick colors, drag stop positions, rotate the angle, and see the result live. When you are happy with it, copy the complete CSS property or just the gradient value and paste it straight into your stylesheet.

What this tool does

Linear, radial, and conic gradient types

Add unlimited color stops with color picker and position slider

Angle control for linear and conic gradients

10 curated presets to start from

Live preview updates as you edit

Copy full CSS property or gradient value only

Zero data sent to any server

How to create a CSS gradient

Choose a type

Select Linear, Radial, or Conic at the top of the controls panel.

Set the angle

Drag the angle slider to rotate the direction of a linear or conic gradient.

Edit color stops

Click the color swatch to pick a color. Drag the slider to set the stop position.

Copy the CSS

Click Copy CSS to get the full property or Copy value only for just the gradient string.

Common Questions

FAQ: Gradient Generator Online Free

Yes, completely free. No account, no signup, and no payment required at any point.

A linear gradient transitions colors along a straight line at a set angle. A radial gradient radiates outward from a center point in a circular or elliptical pattern. A conic gradient sweeps colors around a center point like a color wheel. Each type produces a visually distinct look and suits different design contexts.

Click the Add color stop button below the existing stops. A new stop appears at 100%. Pick a color and drag its position slider to the spot you want. You can add as many stops as needed.

Click Copy CSS to copy the full background property including the property name. Click Copy value only if you want just the gradient string to use in a shorthand or inside another CSS value. Paste either directly into your stylesheet.

Linear and radial gradients have excellent cross-browser support and work in all modern browsers. Conic gradients work in Chrome, Edge, Firefox, and Safari but may need a prefix or fallback for some older browser versions. Check Can I Use if you need to support legacy environments.

Color stop positions are percentages from 0 to 100 representing where along the gradient each color is fully rendered. A stop at 0% is at the very start, 50% is the midpoint, and 100% is the end. Colors transition smoothly between adjacent stops.