Is conic-gradient safe to use?

Conic gradients are supported in current Chrome, Edge, Firefox, and Safari, and are the usual way to draw pie charts and hue wheels in pure CSS. If you must support very old browsers, fall back to a linear or radial gradient.

Why is there no -webkit- prefix?

Gradient syntax has been standardised for years and no current browser needs a prefix. Adding one can actively cause inconsistency, because the old prefixed syntax took its angles from a different reference. The tool always emits the standard form.

CSS / FRONTEND · RUNS IN YOUR BROWSER

CSS Gradient Generator

Build linear, radial, and conic gradients with a live preview and copyable CSS.

Up to 8 colour stops. The output is a single background-image declaration you can paste straight into a stylesheet.

Preview

Preview backdrop

LightDarkTransparent

Generated CSS

background-image: linear-gradient(135deg, #6d5efc 0%, #00c2ff 100%);

Presets

Gradient type

LinearRadialConic

Angle

Repeating gradient

Colour stops

Stop 1

Stop colour

Alpha

Position

Stop 2

Stop colour

Alpha

Position

About this tool

Choose a linear, radial, or conic gradient, then add stops and set the colour and position of each one while the preview updates as you go. Linear gradients take an angle, radial and conic gradients take a centre position, and any of them can be switched to a repeating variant for stripes and rings. The output is a standard background-image declaration with no vendor prefixes.

How it works

Pick a gradient type, or start from one of the preset palettes.
Adjust the angle or centre position and drag the stop positions.
Copy the generated background-image declaration.

Privacy

Every calculation and preview runs inside this browser. Your input is never uploaded, stored, or written to the URL or any log.

Frequently asked questions

Is conic-gradient safe to use?: Conic gradients are supported in current Chrome, Edge, Firefox, and Safari, and are the usual way to draw pie charts and hue wheels in pure CSS. If you must support very old browsers, fall back to a linear or radial gradient.
Why is there no -webkit- prefix?: Gradient syntax has been standardised for years and no current browser needs a prefix. Adding one can actively cause inconsistency, because the old prefixed syntax took its angles from a different reference. The tool always emits the standard form.

← All CSS / Frontend tools