What happened

The newsletter points to Chris Coyier’s exploration of using conic gradients to make triangles. The key is that the gradient has angular color stops: a hard edge between two stops produces a clean geometric shape.

The function accepts a list of colors and stops; the optional from value rotates the result, while at moves its center. Smooth stops create a color wheel, and coincident stops create crisp slices.

.badge {
  background: conic-gradient(
    from 45deg at 50% 50%,
    #22d3ee 0 90deg,
    #0f766e 90deg 180deg,
    transparent 180deg 360deg
  );
}

The background remains regular CSS. It can be combined with border-radius, clip-path, masks, and pseudo-elements without introducing extra DOM nodes.

Why it matters

Linear gradients suit stripes and lighting, while radial gradients suit glows and circular falloff. conic-gradient() solves a different geometric problem: it divides an area by angle. That makes it a natural fit for proportions, dials, direction markers, and repeating decorative patterns.

It is not a reason to replace every SVG icon. SVG is still better for precise paths, accessible descriptions, or complex interactive graphics. But for a local visual treatment, a conic gradient can reduce markup and let colors, size, and rotation react to CSS custom properties.

Angles can also be animated. A progress indicator can grow a slice, for example, and a hover state can rotate a set of rays. Test motion on real devices and provide a calmer alternative for users who prefer reduced motion.

In practice

1. For a pie chart, use hard stops: conic-gradient(#22d3ee 0 40%, #155e75 40% 100%). The colors directly represent the shares.
2. For a triangle, keep one angular slice opaque and make the rest transparent; then constrain the pseudo-element’s size.
3. Try repeating-conic-gradient() for a repeating pattern. A small background size can produce a grid, checkerboard, or ornament.
4. Use at 60% 45% when the visual center should not match the box center. A modest shift often improves the composition.
5. Check contrast. Decorative backgrounds must not make text harder to read; place text on a solid layer where needed.

A practical pattern is to put the gradient on a pseudo-element with pointer-events: none. The decoration then cannot block links or buttons, while the component’s content stays semantic.

Takeaway

conic-gradient() is a compact tool for angle-based graphics. It works especially well where a shape responds to interface state or data: indicators, badges, charts, and small decorative details.

Start with a simple slice and hard color stops. If the result needs many independent shapes, labels, and advanced accessibility, SVG remains the better fit.