Create beautiful linear, radial, and conic gradients. Copy the CSS code or download as PNG.
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);A CSS gradient is a smooth transition between two or more colors. CSS supports three types: linear-gradient (colors change along a straight line), radial-gradient (colors radiate from a center point), and conic-gradient (colors rotate around a center point).
Simply choose a gradient type (linear, radial, or conic), add color stops, adjust positions by dragging, and fine-tune the angle. You can copy the CSS code directly or download the gradient as a PNG image in various sizes.
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. Conic gradients rotate colors around a center point, like a color wheel.
Yes, completely free with no signup required. Everything happens in your browser — we don't store any data or require any payment.
Explore more design and screenshot tools: