A linear-gradient transitions colours along a straight line whose direction you set with an angle (0deg points up, 90deg points right). A radial-gradient radiates outward from a centre point and can be a circle or an ellipse sized to the nearest or farthest side or corner. A conic-gradient rotates its colours around a centre point, so its stops are positioned by angle in degrees rather than by percentage — it is ideal for colour wheels and pie-chart effects. The AnyTool generator lets you switch between all three and remaps your stop positions automatically.

A colour stop pins a colour to a position along the gradient. For linear and radial gradients the position is a percentage (0% is the start, 100% is the end); for conic gradients it is an angle in degrees around the circle. If you place two stops at the same position you create a hard line — a crisp colour band instead of a smooth blend. The generator keeps stops sorted as you drag them, and you can add, remove, recolour, distribute evenly or reverse the whole set with one click.

AnyTool CSS Gradient Generator runs entirely in your browser. Your gradient is just a model of colours and positions; the CSS, Tailwind arbitrary value and SVG are strings built from it, and the PNG is rasterised locally on a canvas from that SVG. No colour data, image or settings are ever sent to a server, and the page works offline once cached.

conic-gradient() reached baseline support across Chrome, Edge, Firefox and Safari in November 2020, so it works in any up-to-date browser. linear-gradient and radial-gradient are supported everywhere. The exported CSS block from AnyTool always includes a solid fallback colour and a -webkit- line for very old WebKit, so legacy browsers degrade gracefully. Note that SVG has no true conic primitive, so an exported conic SVG or PNG is a high-fidelity approximation built from fine sampled wedges — always test in your target browsers.