What is the difference between radial-gradient and conic-gradient?

A radial-gradient emerges progressively from a central point outward in concentric circles or ellipses. A conic-gradient sweeps color transitions around a central origin point in a 360-degree radial rotation (like the colors on a pie chart or color wheel).

How does gradient shape affect radial-gradient?

The 'circle' shape maintains a constant radius regardless of the container dimensions. The 'ellipse' shape stretches proportionally to match the container aspect ratio.

Are conic gradients supported across all browsers?

Yes, CSS conic-gradient is natively supported across all modern browsers including Chrome, Edge, Safari, Firefox, and mobile browsers (over 97% global support).

Can I add more color stops to my gradient?

Yes, you can configure 2 or 3 color stops with independent percentage positions to design complex lighting, glowing orbs, and multi-color sweeps.

CSS Radial & Conic Gradient Generator

What is a CSS Radial & Conic Gradient?

In modern CSS styling, a radial-gradient() produces an image consisting of a progressive transition between two or more colors that radiate outward from an origin point in circular or elliptical geometries. Conversely, a conic-gradient() rotates color stops around a central 2D pivot point in degrees (from 0deg to 360deg), producing rotational color wheels, glowing spotlight halos, and dynamic dashboard gauge meters without heavy graphic images.

Key Capabilities

Radial & Conic Dual Mode: Switch effortlessly between standard radial diffusion and 360-degree angular conic sweeps.
Multi-Stop Color Sliders: Fine-tune up to three distinct color stops with exact percentage positions.
Dynamic Origin Alignment: Position the gradient anchor at center, top, bottom, or corner angles.
Production-Ready Code: Copies clean, standard CSS background declarations ready for immediate deployment.

How to Create Radial and Conic Gradients

Select either Radial Gradient or Conic Gradient at the top.
Choose the gradient shape (Circle or Ellipse) and origin placement (Center, Top, Corners).
Pick your color stops and slide their position handles to craft smooth or hard-edge transitions.
Click Copy CSS to paste the rule into your website stylesheets.

Frequently Asked Questions

What is the difference between circle and ellipse radial gradients?

A circle maintains a 1:1 circular ratio regardless of the bounding element's width or height, whereas an ellipse automatically stretches to fit rectangular or oblong containers.

How can I make a hard-edge color transition?

By setting two color stops at the exact same percentage (for example, Stop 1 at 50% and Stop 2 at 50%), the gradient transitions abruptly, creating a crisp graphic edge.

Can I use this gradient inside a CSS background-image?

Yes! In CSS, gradients are classified as image data types, meaning you can assign them to background or background-image interchangeably.

Does this generator work offline?

Yes. The tool runs 100% in your browser using pure client-side JavaScript with zero network requests needed during editing.

CSS Radial & Conic Gradient Maker