Effects

Border radius, borders, shadows, blur, opacity, animations, and transition tokens.

Border Radius

Derived from the base --radius: 0.625rem token. All values scale proportionally.

calc(var(--radius) * 0.4)

calc(var(--radius) * 0.6)

calc(var(--radius) * 0.8)

var(--radius)

calc(var(--radius) * 1.4)

calc(var(--radius) * 1.8)

calc(var(--radius) * 2.2)

calc(var(--radius) * 2.6)

9999px

Border Widths

1px

2px

4px

8px

Box Shadows

Elevation levels for cards, modals, and interactive elements. Shadows use --shadow-* theme tokens.

0 1px rgb(0 0 0 / 0.05)

0 1px 2px 0 rgb(0 0 0 / 0.05)

0 1px 3px 0 rgb(0 0 0 / 0.1), ...

0 4px 6px -1px rgb(0 0 0 / 0.1), ...

0 10px 15px -3px rgb(0 0 0 / 0.1), ...

0 20px 25px -5px rgb(0 0 0 / 0.1), ...

0 25px 50px -12px rgb(0 0 0 / 0.25)

none

Drop Shadows

Filter-based shadows that follow an element's shape including transparent areas. Applied via CSS filter: drop-shadow().

0 1px 1px rgb(0 0 0 / 0.05)

0 1px 2px rgb(0 0 0 / 0.15)

0 3px 3px rgb(0 0 0 / 0.12)

0 8px 8px rgb(0 0 0 / 0.1)

0 16px 16px rgb(0 0 0 / 0.1)

0 24px 24px rgb(0 0 0 / 0.15)

none

Blur

Gaussian blur filter values. Use --blur-* tokens for consistent blur levels.

0px

4px

8px

12px

16px

24px

40px

64px

Opacity

0%

5%

10%

20%

25%

30%

40%

50%

60%

70%

75%

80%

90%

95%

100%

Animations

Built-in keyframe animations defined as --animate-* theme tokens. Hover over each card to see the animation in action.

Continuous rotation, ideal for loading spinners

spin 1s linear infinite

Scale and fade out, ideal for notification badges

ping 1s cubic-bezier(0, 0, 0.2, 1) infinite

Gentle opacity fade, ideal for skeleton loaders

pulse 2s ease-in-out infinite

Vertical bounce, ideal for scroll indicators

bounce 1s infinite

Live Preview

spin

ping

pulse

bounce

Transition Easing

Timing functions for CSS transitions. Click each card to preview the easing curve. Defined as --ease-* theme tokens.

Transition Durations

Standard duration values for transitions and animations. Shorter durations for micro-interactions, longer for page-level transitions.

Class	Value	CSS
	75ms	`transition-duration: 75ms`
	100ms	`transition-duration: 100ms`
	150ms	`transition-duration: 150ms`
	200ms	`transition-duration: 200ms`
	300ms	`transition-duration: 300ms`
	500ms	`transition-duration: 500ms`
	700ms	`transition-duration: 700ms`
	1000ms	`transition-duration: 1000ms`

Focus Ring

Tab into the elements below to see the focus ring styles. The ring color uses --ring (brand-300, golden).

Focus me (link)

Composition Patterns

Common effect combinations showing how tokens layer together in real components. These patterns create depth and visual hierarchy.

Card elevation levels

Flat

shadow-none

Raised

shadow-sm

Floating

shadow-md

Overlay

shadow-xl

Interactive element states

Default

Hover

Active

Focused

Disabled

Glassmorphism

Frosted glass overlay

backdrop-blur-md + bg-white/10

Design Guidelines

Do

Use shadow to indicate elevation. Flat elements sit on the page, raised elements float above. Use shadow-sm for cards, shadow-lg for dropdowns, and shadow-xl for modals.
Match radius to component size. Small elements get rounded-sm, medium components get rounded-lg, and large panels get rounded-xl.
Use ease-out for entering elements. Elements appearing on screen should decelerate. ease-in is for elements leaving the viewport.
Keep animations under 300ms for micro-interactions. Hover, toggle, and button press animations should feel instant. Reserve duration-500+ for page transitions.
Derive radius from the --radius token. The base token ensures all corners stay proportional when the theme is adjusted.

Don't

Don't stack multiple shadow layers manually. Use the predefined shadow scale instead of combining shadow-sm with custom box shadows. The scale is designed for consistent elevation.
Don't use blur on text content. Blurring text makes it unreadable. Use blur only on background overlays and decorative elements.
Don't animate layout properties. Avoid animating width, height, or margin. Use transform and opacity for 60fps performance.
Don't use animation for critical information. Users with prefers-reduced-motion may not see animations. Ensure the UI is fully functional without them.
Don't mix border-radius values within a component. If a card uses rounded-lg, inner elements should use rounded-md or smaller for visual nesting.

Developer Reference

Accessibility

The focus ring uses focus-visible — it only appears on keyboard navigation, not mouse clicks.
Respect prefers-reduced-motion. All built-in animations should be wrapped with motion-safe:animate-* or disabled entirely for users who prefer reduced motion.
Never rely on shadow alone to indicate focus or selection. Shadows can be invisible in high-contrast mode. Pair with borders or outlines.
opacity values below 50% make content hard to read for low-vision users. Use text-muted-foreground instead of applying opacity to text.

Usage

// Border radius (derived from --radius: 0.625rem)
<div className="rounded-sm">Small radius</div>
<div className="rounded-lg">Base radius</div>
<div className="rounded-xl">Large radius</div>
<div className="rounded-full">Pill / circle</div>

// Elevation with shadows
<div className="shadow-sm">Card</div>
<div className="shadow-md">Dropdown</div>
<div className="shadow-lg">Popover</div>
<div className="shadow-xl">Modal</div>

// Blur and glass effects
<div className="backdrop-blur-md bg-white/10">
  Frosted glass
</div>

// Animations (hover to play)
<div className="animate-spin">Spinner</div>
<div className="animate-pulse">Skeleton loader</div>

// Transitions
<button className="transition-colors duration-150 ease-out
  hover:bg-accent">
  Hover me
</button>

// Focus ring
<button className="focus-visible:ring-3 focus-visible:ring-ring/50
  focus-visible:border-ring">
  Keyboard focusable
</button>

// Reduced motion support
<div className="motion-safe:animate-bounce">
  Respects user preferences
</div>