Create stunning linear and radial CSS gradients with live preview — copy the CSS code instantly.
Copied!
Select Linear, Radial, or Conic. For linear gradients, set the angle using the slider.
Click color stops to pick colors. Drag the position sliders to control where each color starts and ends. Add more stops for complex gradients.
Click Copy CSS to copy the ready-to-use CSS background property code and paste it into your stylesheet.
A CSS gradient is a smooth transition between two or more colors, created entirely in CSS without images. Gradients are used for backgrounds, buttons, text effects, and UI elements.
Linear gradients transition colors in a straight line (top to bottom, left to right, or any angle). Radial gradients radiate outward from a center point in a circular or elliptical pattern.
You can add as many color stops as you need. Each stop has a color and a position (0%–100%).
Yes. linear-gradient, radial-gradient, and conic-gradient are supported in all modern browsers including Chrome, Firefox, Safari, and Edge.