"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.