shadow

Preset shadow values and their consumers.

Scope

These values come from the current preset. Project theme declarations can override them. Mode-specific entries are labeled separately.

Each shadow combines several layers. The current light and dark variants keep the same geometry and change their colors and opacity.

Values

xs

--shadow-xs

Default0 0 0 1px oklch(0% 0 none / .04), 0 1px 2px -1px oklch(0% 0 none / .08)

light0 0 0 1px oklch(0% 0 none / .04), 0 1px 2px -1px oklch(0% 0 none / .08)

dark0 0 0 1px oklch(100% 0 none / .04), 0 1px 2px -1px oklch(0% 0 none / .3)

sm

--shadow-sm

Default0 0 0 1px oklch(0% 0 none / .04), 0 1px 2px -1px oklch(0% 0 none / .06), 0 3px 6px -2px oklch(0% 0 none / .08)

light0 0 0 1px oklch(0% 0 none / .04), 0 1px 2px -1px oklch(0% 0 none / .06), 0 3px 6px -2px oklch(0% 0 none / .08)

dark0 0 0 1px oklch(100% 0 none / .05), 0 1px 2px -1px oklch(0% 0 none / .34), 0 3px 6px -2px oklch(0% 0 none / .26)

md

--shadow-md

Default0 0 0 1px oklch(0% 0 none / .05), 0 2px 4px -2px oklch(0% 0 none / .06), 0 8px 16px -4px oklch(0% 0 none / .1)

light0 0 0 1px oklch(0% 0 none / .05), 0 2px 4px -2px oklch(0% 0 none / .06), 0 8px 16px -4px oklch(0% 0 none / .1)

dark0 0 0 1px oklch(100% 0 none / .06), 0 2px 4px -2px oklch(0% 0 none / .38), 0 8px 16px -4px oklch(0% 0 none / .3)

lg

--shadow-lg

Default0 0 0 1px oklch(0% 0 none / .05), 0 4px 8px -4px oklch(0% 0 none / .08), 0 16px 32px -8px oklch(0% 0 none / .12)

light0 0 0 1px oklch(0% 0 none / .05), 0 4px 8px -4px oklch(0% 0 none / .08), 0 16px 32px -8px oklch(0% 0 none / .12)

dark0 0 0 1px oklch(100% 0 none / .06), 0 4px 8px -4px oklch(0% 0 none / .42), 0 16px 32px -8px oklch(0% 0 none / .34)

xl

--shadow-xl

Default0 0 0 1px oklch(0% 0 none / .06), 0 8px 16px -6px oklch(0% 0 none / .1), 0 24px 48px -12px oklch(0% 0 none / .14)

light0 0 0 1px oklch(0% 0 none / .06), 0 8px 16px -6px oklch(0% 0 none / .1), 0 24px 48px -12px oklch(0% 0 none / .14)

dark0 0 0 1px oklch(100% 0 none / .07), 0 8px 16px -6px oklch(0% 0 none / .46), 0 24px 48px -12px oklch(0% 0 none / .38)

2xl

--shadow-2xl

Default0 0 0 1px oklch(0% 0 none / .06), 0 12px 24px -8px oklch(0% 0 none / .12), 0 32px 64px -16px oklch(0% 0 none / .18)

light0 0 0 1px oklch(0% 0 none / .06), 0 12px 24px -8px oklch(0% 0 none / .12), 0 32px 64px -16px oklch(0% 0 none / .18)

dark0 0 0 1px oklch(100% 0 none / .07), 0 12px 24px -8px oklch(0% 0 none / .5), 0 32px 64px -16px oklch(0% 0 none / .44)

Consumers

box-shadow-, shadow-

Customize

See variables and modes and theme directives. For usage and examples, see Elevation.