Effects

Effects add depth and visual hierarchy to your interface through shadows and blur. These tokens are calibrated to work consistently across light and dark themes—shadows automatically adjust their intensity and color to maintain appropriate contrast in each mode. Using effect tokens ensures your custom surfaces and overlays integrate naturally with the rest of your 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 colour 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