CSS Gradient Generator

Linear gradients transition colors along a straight line at a given angle (e.g. top-to-bottom or left-to-right). Radial gradients radiate outward from a center point in a circular or elliptical shape. Conic gradients sweep colors around a center point like a color wheel or pie chart.

Copy the output and paste it directly into your CSS file or style attribute. For example: .hero { background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); }. It works in all modern browsers without any prefix.

Yes — click '+ Add Stop' to insert additional color stops. Each stop has its own color picker and position slider (0–100%). You can remove any stop (minimum 2 required) using the × button.

For linear gradients, the angle sets the direction of the color transition: 0° is bottom-to-top, 90° is left-to-right, 135° is diagonal (top-left to bottom-right), and 180° is top-to-bottom. For conic gradients, it sets the starting rotation angle of the sweep.

Linear and radial gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge with no prefixes needed. Conic gradients are supported in Chrome 69+, Firefox 83+, Safari 12.1+, and Edge 79+. All three types have excellent coverage for modern web development.

No. The CSS Gradient Generator runs entirely in your browser using JavaScript. No data is ever sent to any server. You can even use it offline.