Shadows
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.