Elevation

Outer and inner shadow tokens. Use the lightest shadow that communicates the elevation level — heavy shadows can distract from the content.

Every shadow uses --shadow-strength, set in /index.css — 8% in light, 25% in dark. Adjust this value to change shadow strength across the application. Open Props ships 1%, which leaves --shadow-3's five layers at 3–8% alpha spread over blurs up to 15px — too faint and diffuse to distinguish elevated elements on a light page. Adjust the shared strength instead of defining shadows in individual components.

Outer shadows — --shadow-1..--shadow-6

Guideline: 1–2 for resting state, 3–4 for hover/elevated, 5–6 for modals.

shadow-1
shadow-2
shadow-3
shadow-4
shadow-5
shadow-6
Show code .card { box-shadow: var(--shadow-1); } .card:hover { box-shadow: var(--shadow-3); } .modal { box-shadow: var(--shadow-6); }

Inset shadows — --inner-shadow-0..--inner-shadow-4

For pressed / recessed states like text inputs on pressed surfaces.

Show code input { box-shadow: var(--inner-shadow-1); } .well { box-shadow: var(--inner-shadow-3); }

Overlay surfaces

Anchored panels that float above page content — the x-select picker, the combobox list, ui-menu, ui-popover, ui-notifications — all use these styles:

Show code .panel { background: var(--surface-overlay); border: var(--border-size-1) solid var(--border-color); border-radius: var(--radius-2); box-shadow: var(--shadow-3); }

These styles distinguish panels from their surroundings in both themes. On a light page a panel cannot be lighter than the page, so --surface-overlay matches --surface-1 and the shadow distinguishes the panel. On a dark page a shadow is difficult to see against a near-black background, so --surface-overlay uses a lighter tone to make the panel stand out. This is the same split Material 3 makes between shadow and tonal elevation, and the reason Atlassian's guidance says overlay surfaces get lighter in dark mode.

Use --border-color for both a floating panel and its trigger so their borders have the same emphasis. If those boundaries are too faint, adjust the shared border colors, --border-color and --border-strong, together. Do not strengthen a single panel's border independently.

--shadow-3 is the level for anchored panels. ui-dialog uses --shadow-5 because a modal is also backed by a ::backdrop scrim. Tooltips and toasts use a contrasting background without a border.

Pitfall

Don't escalate shadows for subtle effects. --shadow-1 is often enough, and --shadow-3 is used for every anchored overlay in this library — reserve --shadow-5..--shadow-6 for modals.

If a shadow looks too weak, check its strength before choosing a higher elevation token. Check --shadow-strength first: this one value can strengthen shadows throughout the app.

--shadow-strength only works on :root. Open Props derives --shadow-strength-3..-10 as calc(var(--shadow-strength) + n%) and declares them on :where(html), so they are substituted there and descendants inherit the resolved value, such as calc(8% + 7%). Setting --shadow-strength on a component has no effect — the derived values have already been resolved on the root element. Override it on :root, which is html, so the derived values update too.

See also