CSS Gradient Generator

A CSS gradient is a smooth transition between two or more colors. CSS supports multiple types including linear-gradient (colors change along a straight line) and radial-gradient (colors radiate from a center point).

Simply choose a gradient type (linear or radial), add color stops, adjust positions by dragging, and fine-tune the angle. You can copy the CSS code directly or download the gradient as an image in various sizes and formats.

Yes! All gradients you create are yours to use however you like — in personal projects, commercial websites, apps, or any other purpose. No attribution required.

Linear gradients transition colors in a straight line at any angle. Radial gradients radiate colors outward from a center point in a circular or elliptical shape.

Yes, completely free with no signup required. Everything happens in your browser — we don't store any data or require any payment.