Effects

Shadows and blur add depth. Effect tokens are tuned for both themes — shadow intensity and color shift so contrast holds in light and dark. Custom surfaces and overlays built on them sit naturally beside the rest of the interface.

Shadows

Shadow tokens create elevation and depth, helping users understand the layering of interface elements.

--rs-shadow-feather

subtle

Cards, subtle elevation

--rs-shadow-soft

gentle

Buttons, interactive elements

--rs-shadow-lifted

noticeable

Dropdowns, popovers

--rs-shadow-floating

strong

Modals, dialogs, tooltips

--rs-shadow-inset

inner

Pressed states, inputs

Blur effects

Blur tokens are used for backdrop effects and creating depth through transparency.

--rs-blur-sm

blur(0.5px)

Subtle blur effect

--rs-blur-md

blur(1px)

Medium blur effect

--rs-blur-lg

blur(2px)

Noticeable blur effect

--rs-blur-xl

blur(4px)

Strong blur for overlays

Usage

Shadow and blur tokens compose with the color tokens. Reach for a named shadow rather than a hand-rolled box-shadow so elevation stays consistent across surfaces.

1/* Dashboard widget with hover interaction */
2.dashboard-widget {
3  box-shadow: var(--rs-shadow-feather);
4  transition: box-shadow 0.2s ease;
5}
6
7.dashboard-widget:hover {
8  box-shadow: var(--rs-shadow-soft);
9}
10
11/* Floating action panel */
12.action-panel {
13  position: fixed;
14  bottom: var(--rs-space-6);
15  right: var(--rs-space-6);
16  box-shadow: var(--rs-shadow-floating);
17}
18
19/* Command palette / spotlight search */
20.command-palette {
21  box-shadow: var(--rs-shadow-floating);
22  backdrop-filter: var(--rs-blur-xl);
23  background-color: var(--rs-color-overlay-white-a8);
24}
25
26/* Sticky header with scroll shadow */
27.sticky-header {
28  position: sticky;
29  top: 0;
30  box-shadow: var(--rs-shadow-feather);
31  backdrop-filter: var(--rs-blur-lg);
32  background-color: var(--rs-color-overlay-white-a6);
33}
34
35/* Context menu */
36.context-menu {
37  box-shadow: var(--rs-shadow-lifted);
38}
39
40/* Pressed/active toggle state */
41.toggle[data-pressed="true"] {
42  box-shadow: var(--rs-shadow-inset);
43}
44
45/* Image lightbox overlay */
46.lightbox-backdrop {
47  backdrop-filter: var(--rs-blur-xl);
48  background-color: var(--rs-color-overlay-black-a8);
49}
50
51/* Notification toast */
52.toast {
53  box-shadow: var(--rs-shadow-lifted);
54}
55
56/* Draggable item while dragging */
57.draggable[data-dragging="true"] {
58  box-shadow: var(--rs-shadow-floating);
59}

Best practices

Use shadows sparingly - Too many shadows can make interfaces feel cluttered
Match elevation to importance - Higher elevation shadows for more prominent elements
Consider theme context - Shadows are automatically adjusted for dark theme
Combine with blur - Use blur effects with overlays for a modern frosted glass aesthetic
Animate transitions - Smooth shadow transitions on hover create polished interactions