This tool supports linear gradients (straight lines), radial gradients (circular/elliptical), and conic gradients (color wheel effect). Each type has unique properties and use cases.

Click the 'Add Color Stop' button or click directly on the gradient bar to add new color stops. You can add as many colors as you need. Drag stops to reposition them.

Linear gradients transition colors along a straight line (any angle). Radial gradients transition from a center point outward in a circular or elliptical pattern.

For linear gradients, use the angle slider or click the direction arrows. For radial gradients, choose the shape (circle/ellipse) and position. For conic, set the starting angle.

Yes! Each color stop has an opacity slider. Set opacity below 100% to create transparent areas. This is great for overlay effects and fade-outs.

Click the 'Copy CSS' button to copy the gradient code to your clipboard. The code includes vendor prefixes for maximum browser compatibility.

CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The generated code includes fallbacks for older browsers.

You can copy the CSS code and save it in your project. The tool also shows a shareable URL with your gradient settings encoded in the hash.

Conic gradients create color wheel effects, pie charts, and spinning/loading animations. They transition colors around a center point rather than from it.

For smooth gradients, use colors that are close on the color wheel. Avoid high-contrast jumps between stops. Adding intermediate color stops can help smooth transitions.

Gradient Preview

CSS Code

Gradient Type

Selected Color Stop

Presets

Related Tools