Create beautiful CSS linear and radial gradients visually. Copy the CSS code instantly — no coding needed.
Select Linear, Radial or Conic. For linear gradients, set the angle using the slider or preset direction buttons.
Pick a colour and position for each stop. Click + Add Stop to add more stops. Drag the position slider to control where each colour appears.
Click Copy CSS to copy the complete, production-ready CSS gradient code straight to your clipboard.
A CSS gradient is a smooth transition between two or more colours defined in CSS without needing an image. They are created using the linear-gradient() or radial-gradient() CSS functions.
A linear gradient transitions colours along a straight line at a given angle. A radial gradient transitions colours outward from a centre point in an elliptical or circular pattern.
Yes — click the + Add Stop button to add as many colour stops as you need. Each stop can have its own colour and position (0%–100%) along the gradient.
Yes. The generated CSS uses the standard unprefixed syntax which is supported in all modern browsers (Chrome, Firefox, Safari, Edge). Vendor prefixes are no longer needed for production use.
Apply the gradient to the background, then add -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; to clip the gradient to the text shape.
Yes. All gradient generation happens in your browser using JavaScript. No data is ever sent to any server.
