Generator Tools

CSS Conic Gradient Generator

Build CSS conic-gradient backgrounds with live preview. Smooth, hard-stop, color wheel, and progress ring presets with one-click CSS, Tailwind, and SVG copy.

Live preview

Drag the center marker to move the conic origin.

Presets

Gradient settings

From angle0deg

Enable Repeat span to tile the gradient around the circle.

Center X50%

Center Y50%

Color stops (8 / 12)

Drag the degree slider to reposition each stop.

Stop 1
Color
Opacity100%
Position0deg
Stop 2
Color
Opacity100%
Position60deg
Stop 3
Color
Opacity100%
Position90deg
Stop 4
Color
Opacity100%
Position150deg
Stop 5
Color
Opacity100%
Position210deg
Stop 6
Color
Opacity100%
Position240deg
Stop 7
Color
Opacity100%
Position300deg
Stop 8
Color
Opacity100%
Position360deg

CSS

background: conic-gradient(from 0deg at 50% 50%, #ef4444 0deg, #f59e0b 60deg, #eab308 90deg, #22c55e 150deg, #06b6d4 210deg, #3b82f6 240deg, #8b5cf6 300deg, #ef4444 360deg);
background-image: conic-gradient(from 0deg at 50% 50%, #ef4444 0deg, #f59e0b 60deg, #eab308 90deg, #22c55e 150deg, #06b6d4 210deg, #3b82f6 240deg, #8b5cf6 300deg, #ef4444 360deg);

CSS value only

conic-gradient(from 0deg at 50% 50%, #ef4444 0deg, #f59e0b 60deg, #eab308 90deg, #22c55e 150deg, #06b6d4 210deg, #3b82f6 240deg, #8b5cf6 300deg, #ef4444 360deg)

Drop into any place CSS accepts an image, such as background-image or mask-image.

Tailwind arbitrary class

bg-[conic-gradient(from_0deg_at_50%_50%,_#ef4444_0deg,_#f59e0b_60deg,_#eab308_90deg,_#22c55e_150deg,_#06b6d4_210deg,_#3b82f6_240deg,_#8b5cf6_300deg,_#ef4444_360deg)]

Works in Tailwind v3 and v4. The underscores represent the spaces required inside an arbitrary value.

SVG markup

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800">
  <foreignObject x="0" y="0" width="1200" height="800">
    <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;background:conic-gradient(from 0deg at 50% 50%, #ef4444 0deg, #f59e0b 60deg, #eab308 90deg, #22c55e 150deg, #06b6d4 210deg, #3b82f6 240deg, #8b5cf6 300deg, #ef4444 360deg);"></div>
  </foreignObject>
</svg>

The SVG wraps the gradient in a foreignObject so it renders as a standalone background image. Use it for hero images or static assets.

Everything you see here is generated in your browser. Nothing you enter is sent to a server.

How to use

Pick a preset like Color wheel, Progress ring, or Sunburst to start from a polished gradient.
Switch between Smooth and Hard wedges to control whether colors blend or form crisp slices.
Drag the center marker on the live preview, or use the Center X and Center Y sliders for precise placement.
Adjust the From angle to rotate the sweep, and toggle Repeat span to switch to repeating-conic-gradient.
Edit colors, opacity, and (in Smooth mode) the degree of each stop, then click Copy CSS, Copy class, or Download SVG.

About this tool

CSS Conic Gradient Generator is a focused builder for the CSS conic-gradient() and repeating-conic-gradient() functions. A conic gradient sweeps colors around a center point instead of fading along a line (linear) or out from a center (radial), which is what makes it the right primitive for color wheels, pie wedges, percentage rings, sunbursts, vinyl labels, and any background that wants a rotational feel. The tool surfaces every parameter that matters: the starting angle (from <deg>), the center position inside the box (at X% Y%), the list of color stops with their angle in degrees, the alpha channel per stop, and an optional repeat span that switches the output to repeating-conic-gradient for kaleidoscope and checker-fan looks. Two stop modes are supported. Smooth mode blends colors between adjacent stops and lets you pick the degree of each stop independently, which is the right choice for color wheels and vintage sweeps. Hard mode auto-distributes the stops evenly and duplicates the boundary so each wedge has a crisp edge, which is the pattern CSS pie charts use. A draggable marker on the live preview lets you reposition the conic origin with the pointer; sliders cover precise values. Six presets cover the common shapes (color wheel, pie wedges, progress ring, sunburst, vintage sweep, and a checker fan) and a Randomize button picks a fresh palette from a curated UI color set. The output panel emits a ready-to-paste CSS declaration block, the CSS value on its own (drop it into background-image, mask-image, or border-image), a Tailwind arbitrary-class string with the spaces escaped as underscores so it works in v3 and v4 without config changes, and an SVG file that wraps the gradient in a foreignObject so it renders as a standalone asset in design tools. All parsing, math, and preview rendering happen in your browser, so the colors and parameters you enter are never uploaded.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Conic Gradient Generator

How to use

About this tool

You may also like

CSS Gradient Generator

CSS Mesh Gradient Generator

CSS Pie Chart Generator

Color Palette Generator

CSS Background Pattern Generator