Shadows

Depth is a preset in the theme, which can deepen at a breakpoint; a component names the preset.

Shared engine playground

Actual viewport: 0px. Resize the browser to test transitions. The preview uses the active theme and shared engine defaults. Edits below are scoped to this demo and do not save source JSON.

Shadows and breakpoint configuration

Shadow presets

Shadow 0

box-shadow: shadow(0);

none

Shadow 1

box-shadow: shadow(1);

0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1)

Shadow 2

box-shadow: shadow(2);

0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.12)

Shadow 3

box-shadow: shadow(3);

0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.14)

Shadow 4

box-shadow: shadow(4);

0 4px 6px rgba(0, 0, 0, 0.08), 0 10px 15px rgba(0, 0, 0, 0.16)

Shadow 5

box-shadow: shadow(5);

0 10px 15px rgba(0, 0, 0, 0.1), 0 20px 25px rgba(0, 0, 0, 0.2)

Theme uxdsl.theme.json, merged over the base theme

{
  "shadows": {
    "2": "xs(0 1px 2px rgba(0, 0, 0, 0.12)) md(0 4px 12px rgba(0, 0, 0, 0.16))"
  }
}

UXDSL you write example.uxdsl

.card { box-shadow: shadow(2); }
.flat { box-shadow: shadow(0); }

CSS you get compiled by uxdsl; :root shows only these tokens

:root {
  --uxdsl__shadow__0: none;
  --uxdsl__shadow__2: 0 1px 2px rgba(0, 0, 0, 0.12);
}
@media (min-width: 768px) { :root { --uxdsl__shadow__2: 0 4px 12px rgba(0, 0, 0, 0.16); } }
.card { box-shadow: var(--uxdsl__shadow__2); }
.flat { box-shadow: var(--uxdsl__shadow__0); }

Rules

shadow(k) names a box-shadow preset. A key is a name, not a strength or a z-index; it does not change stacking order.
A preset may have several comma-separated layers, inset, and token references; it may be responsive, with a base value. The value steps at breakpoints.
shadow(0) is none and stays a token; a local box-shadow: none removes the effect for one component on purpose.
An unknown key is UXD_SHADOW_REFERENCE; a second argument is UXD_SHADOW_ARGUMENT; the former elevation() alias is UXD_SYNTAX_REMOVED.
For one component choose another preset; to soften every card, change the preset in the theme. A box-shadow preset is not necessarily valid as a text-shadow or drop-shadow().

.card { box-shadow: shadow(2); }
.card:hover { box-shadow: shadow(4); }
.card { box-shadow: shadow(9); }  /* UXD_SHADOW_REFERENCE: no shadow 9 in the theme */

The guide for coding agents is on For AI agents.