API
Effects
Shadows and opacity.
--shadow takes a size by name (md) at any tier, a token, or any box-shadow; it never removes a primitive's focus ring. --shadow-hue tints every shadow in a subtree, and --shadow-angle turns the direction they are cast in: 0deg is down (the default), 90deg left, 180deg up, at any breakpoint or state (--shadow-angle: 180deg on a bottom sheet, --shadow-angle--md: 0deg once it becomes a card). --opacity fades the whole element; for a translucent fill, see --bg-alpha.
Reference
| Utility | Writes | Value | Tiers | Notes |
|---|---|---|---|---|
--shadow | box-shadow | shadow size by name (2xs … 2xl), a var(), or any box-shadow | states | Keywords: 2xs, xs, sm, md, lg, xl, 2xl; works tier-only |
--shadow-hue | the --shadow-* tokens on this subtree | any CSS value | — | |
--shadow-angle | the --shadow-* tokens' cast direction on this subtree | angle the shadow is cast at: 0deg down (default), 90deg left, 180deg up | breakpoints, states | works tier-only |
--opacity | opacity | any CSS value | states | works tier-only; --before-opacity / --after-opacity |