CSS Radial vs Conic Gradients: Angle and Center

CSS gradients offer powerful ways to create smooth color transitions, but radial-gradient() and conic-gradient() process geometric coordinates differently. While both functions rely on a defined center point, they diverge fundamentally in how they handle angles and distribute color stops. Radial gradients push color transitions outward from an origin point along a radius, whereas conic gradients sweep colors around a central pivot point in a circular motion.

The Center Point: Origin vs. Axis

Both gradient types allow developers to position the focal center using the at <position> syntax. If omitted, both default to the center of the element (50% 50%). However, the mathematical role of this point differs between the two:

  • Radial Gradient: The center point acts as an origin of expansion. Colors project outward evenly in all directions, creating concentric circles or ellipses depending on the specified shape and aspect ratio.
  • Conic Gradient: The center point acts as a rotational pivot or axis. Colors do not move outward from this point; instead, they rotate around it, similar to the hands of a clock or rays projecting from a wheel hub.

The Angle: Directional Rotation vs. Distance

The most significant distinction between the two functions is how they incorporate angles:

  • Conic Gradients Depend on Angles: Conic gradients natively accept a starting angle using the from <angle> syntax (e.g., conic-gradient(from 45deg at center, ...)). The default starting position is 0deg, which points directly upward (12 o'clock). Color stops in a conic gradient are measured in angular units (degrees, radians, turns) or percentages representing a portion of a full 360-degree rotation.
  • Radial Gradients Lack Angular Rotation: Standard radial gradients do not support an angle parameter for color distribution. Instead of measuring color stops by degrees, radial gradients measure transitions by linear distance (pixels, rems, or percentages of the radius) moving away from the center point.

Visual Output and Structural Use Cases

The divergence in angle and center calculation leads to distinct visual behaviors:

  • Radial gradients are ideal for lighting effects, soft vignettes, spheres, and glowing backgrounds because the color change is tied directly to the distance from the center.
  • Conic gradients create distinct wedge patterns, making them suitable for color wheels, pie charts, checkerboards, and conical lighting reflections where color variation corresponds to rotation around a fixed axis.