Shadows & Motion

Elevation shadows, animation durations, and easing functions

Box Shadow

CSS Animations

Transitions

Box Shadows

Elevation shadows for creating visual hierarchy and depth. Use sparingly to guide focus.

shadow-sm

Subtle lift for cards at rest

Inactive cards, list items

shadow

Standard elevation

Default card shadow, panels

shadow-md

Medium elevation

Hover states, dropdowns

shadow-lg

Large elevation

Modals, popovers, floating elements

shadow-xl

Extra large elevation

Prominent dialogs, tooltips

shadow-2xl

Maximum elevation

High-emphasis overlays

shadow-inner

Inset shadow

Pressed buttons, input fields

shadow-none

No shadow

Remove shadow on hover/active

Shadow Hover Pattern

A common pattern is to increase shadow on hover to indicate interactivity.

Hover me

shadow-sm → shadow-lg

<Card className="shadow-sm hover:shadow-lg transition-shadow">
  Interactive card
</Card>

Focus Rings

Ring utilities for focus states and outlines. Essential for accessibility.

Default Ring

ring-2 ring-ring ring-offset-2

Brand Ring

ring-2 ring-gray-950/50

Destructive Ring

ring-2 ring-destructive/50

Animation Durations

Timing values for transitions and animations. Shorter for micro-interactions, longer for page transitions.

Class	Value	Use Case
duration-75	75ms	Micro-interactions (cursor change, tiny feedback)
duration-100	100ms	Tooltips, subtle effects
duration-150	150ms	Button states (default)
duration-200	200ms	Menu transitions, dropdown open
duration-300	300ms	Modal/dialog openings, tab switch
duration-500	500ms	Page transitions, complex animations
duration-700	700ms	Slow, dramatic animations
duration-1000	1000ms	Loading states, background effects

Easing Functions

Timing functions that control the rate of change during transitions.

ease-linearcubic-bezier(0, 0, 1, 1)

Constant speed - progress bars, loading spinners

Hover to see animation

ease-incubic-bezier(0.4, 0, 1, 1)

Start slow, end fast - elements exiting screen

Hover to see animation

ease-outcubic-bezier(0, 0, 0.2, 1)

Start fast, end slow - elements entering screen

Hover to see animation

ease-in-outcubic-bezier(0.4, 0, 0.2, 1)

Smooth both ends - most UI transitions (default)

Hover to see animation

Built-in Animations

Ready-to-use animation utilities for common UI patterns.

animate-spin

Continuous rotation (loading spinners)

animate-ping

Radar pulse effect (notifications)

animate-pulse

Gentle opacity pulse (skeleton loaders)

animate-bounce

Bouncing motion (attention grabbers)

Transition Properties

Control which CSS properties are animated during transitions.

transition-none

Disable transitions

none

transition-all

Animate all properties

all

transition-colors

Color changes only

color, background-color, border-color, fill, stroke

transition-opacity

Fade in/out

opacity

transition-shadow

Shadow changes

box-shadow

transition-transform

Position, scale, rotation

transform

Usage

Examples

/* Basic shadow */
<Card className="shadow-lg">Elevated card</Card>

/* Shadow on hover */
<Card className="shadow-sm hover:shadow-lg transition-shadow">
  Interactive card
</Card>

/* Transition with duration and easing */
<button className="transition-colors duration-150 ease-in-out">
  Hover button
</button>

/* Combined transition */
<div className="transition-all duration-200 hover:scale-105 hover:shadow-xl">
  Animated element
</div>

/* Focus ring */
<input className="focus:ring-2 focus:ring-ring focus:ring-offset-2" />

/* Loading spinner */
<div className="animate-spin w-6 h-6 border-2 border-primary border-t-transparent rounded-full" />

/* Skeleton loader */
<div className="animate-pulse bg-muted h-4 rounded" />