Skip to content


Use shadows to add depth to your components and to better separate them from background.

👉 All values on this page can be changed by overriding values in your design tokens.

Shadow Usage in CSS Purpose
layer 1 --rui-shadow-layer-1 Elevation, level 1
layer 2 --rui-shadow-layer-2 Elevation, level 2
focus ring --rui-shadow-focus-ring Focus ring to be used instead of outline

👉 Check how the layer shadows pair nicely with their background color counterparts.

👉 Check Accessibility for all focus ring options.