Free CSS Conic Gradient Generator

Create conic gradients for color wheels, pie charts, spinners, and unique backgrounds. Adjust the starting angle, position, and color stops visually.

How CSS Conic Gradients Work

The CSS conic-gradient() function creates a gradient that sweeps around a center point. Think of it like a color wheel: colors transition as you move clockwise. The syntax — conic-gradient(from 0deg at 50% 50%, red, yellow, green, blue, red) — specifies a starting angle, center position, and color stops distributed around the full 360 degrees.

Pie Charts with Pure CSS

Create CSS-only pie charts using hard color stops. Place two stops at the same degree position to create a sharp boundary between segments: conic-gradient(#ff0000 0% 33%, #00ff00 33% 66%, #0000ff 66% 100%). This creates three equal slices. Combine with border-radius: 50% for a round pie chart.

The Starting Angle

The from keyword rotates the gradient's starting point. By default, the gradient begins at 12 o'clock (0deg). Setting from 90deg rotates it to start at 3 o'clock. Combine the starting angle with the at keyword to control both rotation and center position.

Create your conic gradient below.

deg
Color Stops
background: conic-gradient(from 135deg at 50% 50%, #667eea 0deg, #764ba2 360deg);

What Is the Conic Gradient Generator?

This free tool creates CSS conic gradients visually. Set the starting angle, click on the preview to position the center point, and add color stops that distribute around 360 degrees. The live preview shows your gradient in real-time, and you can copy the generated code in CSS, Tailwind, SCSS, or CSS custom property format. Conic gradients are the foundation for color wheels, pie charts, loading spinners, and geometric patterns.

How to Use This Tool

Step 1: Select the Conic tab. The tool opens with the conic gradient type pre-selected. You'll see a color wheel gradient by default.

Step 2: Set the starting angle. Adjust the “from” angle to rotate the gradient's starting point. Use the slider or type a precise degree value.

Step 3: Position the center. Click on the preview to set the gradient's center, or use the X/Y percentage fields for exact placement.

Step 4: Customize color stops. Edit, add, or remove stops on the bar. For pie chart effects, position two stops at the same degree to create hard edges between segments.

Step 5: Copy the code. Select your output format and click Copy Code.

Key Features

360-degree color distribution. Color stops are positioned in degrees rather than percentages, wrapping around the full circle. The default rainbow preset demonstrates the full spectrum sweep.

Starting angle control. Rotate the entire gradient without changing individual color positions. This is especially useful for pie charts where you want the first segment to start at a specific clock position.

Click-to-set center position. Click anywhere on the live preview to move the gradient's origin point. Off-center positioning creates dramatic asymmetric effects.

Repeating mode. Enable repeating-conic-gradient() to create starburst and checkerboard patterns. With just two color stops, you can generate complex geometric designs.

Creative Uses for Conic Gradients

Color wheel pickers. Distribute hue values evenly around 360 degrees to create a full-spectrum color wheel. Add a radial gradient overlay (white center fading to transparent) for a saturation-aware picker. This is the foundation of many pure-CSS color picker UIs.

Progress indicators and gauges. Create donut charts and progress rings by combining a conic gradient with a circular cutout (using a pseudo-element or mask). Animate the percentage stop to show loading progress without any JavaScript.

Decorative patterns. Use repeating-conic-gradient() to generate checkerboards, starbursts, and ray patterns. Combining multiple repeating conic gradients with different starting angles produces complex kaleidoscope effects that would be difficult to achieve with any other CSS technique.

Frequently Asked Questions

What is a conic gradient?

A conic gradient transitions colors around a center point, like the hands of a clock. Unlike linear gradients (straight line) or radial gradients (center outward), conic gradients sweep in a circle. They're ideal for color wheels, pie charts, and decorative backgrounds.

How do I create a pie chart with conic gradients?

Use hard color stops at the same position to create segments. For example: conic-gradient(#ff0000 0% 25%, #00ff00 25% 50%, #0000ff 50% 75%, #ffff00 75% 100%) creates four equal pie slices.

What does the 'from' angle do?

The 'from' angle rotates the starting point of the gradient. By default (0deg), the gradient starts at the top. 'from 90deg' starts from the right side. This lets you rotate the entire gradient without changing individual color stop positions.

Can I change the center position?

Yes. Click anywhere on the preview to set the center point, or use the X% and Y% input fields for precise positioning. This moves where the color wheel radiates from.

Which browsers support conic gradients?

Conic gradients are supported in all modern browsers: Chrome 69+, Firefox 83+, Safari 12.1+, and Edge 79+. Global browser support is over 95%.

Can I create loading spinners with conic gradients?

Yes. Use a conic gradient from a solid color to transparent, then animate its rotation with CSS @keyframes and transform: rotate(). No JavaScript needed.

Related Tools

CSS Gradient Generator

All gradient types in one tool

Color Picker & Converter

Pick colors and convert between HEX, RGB, HSL

Image Compressor

Compress images to exact file sizes

QR Code Generator

Create custom QR codes