"radial-gradient with a CSS shape keyword errors as a color and drops the rule"

A radial fill written with a standard CSS shape keyword:

background-image: radial-gradient( circle, rgba(0,0,0,.6), rgba(0,0,0,0) );

raises a red "Code Error" card at sheet compile (Cannot read a color from 'circle') and the rule is dropped. The element ends up with no background at all.

The failure is easy to miss: the sheet compiles lazily, the error card appears at load and then goes away, and the failed rule silently vanishes. You are left with a styling loss and no standing error to point at.

The engine's radial-gradient parser accepts a color-stop list only. The standard CSS shape/size/position prelude (circle, ellipse, closest-side, farthest-corner, at 50% 50%, and friends) is not understood. The parser reads the first token (circle) as the first color stop, fails to parse it as a color, and aborts the whole declaration.

This is the same small-legacy-subset CSS parser that rejects border-style: dashed and the modern radial-gradient(<size> at <position>, ...) syntax. Treat any non-rgb/rgba/hex color function and any gradient prelude token as suspect.

Write color stops only, no shape, size, or position prelude:

/* renders the same centred radial fill */
background-image: radial-gradient( rgba(0,0,0,.6), rgba(0,0,0,0) );

A bare radial-gradient(<stop>, <stop>, ...) produces a centred radial fill, which is what circle at the default position would have given you anyway.

If you need a non-centred or shaped gradient, fake it: give a child element an explicit size and position: absolute, place it where the gradient should originate, and paint the plain color-stop gradient on that child. The parent clips it to the shape you want.

By dropping the prelude you hand the parser exactly what it supports (a list of color stops), so it compiles the rule instead of aborting on an unrecognised first "color". The visual result is identical for the common centred case, and the absolutely-positioned-child trick reconstructs anything the prelude would have controlled (origin, size, clipping) out of layout primitives the engine renders reliably.