CSS Gradient Generator

Linear CSS angles start with 0 degrees pointing upward and 90 degrees pointing right. Conic rotation starts at the top and moves clockwise; the center can be moved.

A circle centered at your X/Y percentages, with its radius reaching the farthest corner of the output frame. This tool does not currently offer elliptical or repeating gradients.

Yes. Set opacity from 0 to 100 percent for each stop. Colors export as hex with an optional alpha byte; PNG keeps transparency. The checkerboard is a preview background and is not included in the download.

Stops are rendered by increasing percentage. Equal positions keep their editor order and create a hard color edge. Evenly spaced stops redistributes positions from 0 to 100 percent.

Yes. Use two to eight stops, remove extra stops, reverse colors and positions, or use a preset as a starting point.

PNG uses the entered dimensions and browser canvas rendering. CSS adapts to the element size. Small rasterization or interpolation differences can occur; aspect ratio and radial centers affect the appearance. The shallow CSS sample has a different aspect ratio from the output canvas.

64–3,200 whole pixels per edge, at most 8 million output pixels. Conic PNG creation requires canvas conic-gradient support in your browser.

JSON is a readable record of normalized colors, positions, dimensions and CSS for sharing or reference. This version exports settings but does not import arbitrary JSON.

No processing upload or saved gradient history is used. Canvas generation and downloads run locally. Website ads and analytics follow the privacy information.