[css-backgrounds][css-text-decor] Keywords for predefined shadows

[Crissov]

box-shadow and text-shadow now share a value definition <shadow>, while filter: drop-shadow() slightly differs.

Frameworks and Design Systems provide some presets for them (e.g. Tailwind), which are mostly very basic, often defaulting to a very transparent black. Since drop shadow are cast by the light obstructed by elements and the light source is often directly above the element, it usually has zero horizontal offset and some positive vertical offset. The blur rasius is often one to three tiems the offset.

Material Design notes:

Shadow size reflects elevation. Surfaces at higher elevations have larger shadows, while those at lower elevations have smaller shadows.

Other Design systems, e.g. Fluent Design, also describe the use of shadows to emulate physical characteristics like elevation and material. Overall, key shadows are sharp, directional shadows used to define edges and ambient shadows are soft, diffused shadows used to imply distance.

This feels like it should be possible to define some simple presets available as keywords in the shadow properties (and perhaps even the filter), so graphics-illiterate people like myself can get some decent defaults and readable source code in vanilla CSS without the use of external presets. I have no concrete idea how many of these should exist and what they would look like, but maybe start with something like this:

• low-elevation, medium-elevation, high-elevation or
• elevated, raised, floating, embossed

I am also not sure whether CSS should prescribe the actual values for those keywords or leave it up to implementations, but since CSS3 the trend has been to be rather prescriptive. I think there's even an open issue to normatively specify border-style keywords like groove and ridge.

[schenney-chromium]

It's an interesting idea. I wonder if it could be tied to z-depth, as users might find it incongruous to have stacking order saying one thing and shadows implying another. Using independent keywords for a physical kind of thing like this is also brittle to DOM manipulation.