Effects add depth and visual hierarchy to your interface through shadows and blur. Apsara provides semantic effect tokens that work consistently across light and dark themes.

Shadows

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

Blur Effects

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

Usage

Shadows

1/* Card with subtle shadow */
2.card {
3  box-shadow: var(--rs-shadow-feather);
4}
5
6/* Card on hover with lifted effect */
7.card:hover {
8  box-shadow: var(--rs-shadow-lifted);
9}
10
11/* Dropdown menu */
12.dropdown {
13  box-shadow: var(--rs-shadow-lifted);
14}
15
16/* Modal dialog */
17.modal {
18  box-shadow: var(--rs-shadow-floating);
19}
20
21/* Pressed button state */
22.button:active {
23  box-shadow: var(--rs-shadow-inset);
24}

Blur Effects

1/* Frosted glass effect */
2.glass {
3  backdrop-filter: var(--rs-blur-lg);
4  background-color: var(--rs-color-overlay-white-a4);
5}
6
7/* Subtle background blur */
8.overlay {
9  backdrop-filter: var(--rs-blur-xl);
10}

Elevation Hierarchy

Use shadows to establish visual hierarchy and indicate interactive states:

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