Add depth and polish to your UI with Vayu UI's semantic radius, shadow, and blur utilities.

Overview

Effects add depth and visual hierarchy to your UI through border radius, shadows, and blur. Each utility is semantically named to match its intended layer in the interface.

Border Radius

Semantic radius values map directly to element types, ensuring visual consistency across your UI.

Class	Value	Use For
`rounded-control`	`4px`	Buttons, inputs, chips
`rounded-surface`	`6px`	Cards, panels, containers
`rounded-overlay`	`8px`	Modals, popovers, dropdowns
`rounded-full`	`9999px`	Avatars, badges, pills

Control

Surface

Overlay

Full

<button className="rounded-control px-4 py-2">Button</button>
<div className="rounded-surface p-6">Card</div>
<div className="rounded-overlay p-6">Modal</div>
<img className="w-10 h-10 rounded-full" src="/avatar.jpg" />

Base numeric scale: rounded-sm (4px) · rounded-md (6px) · rounded-lg (8px)

Shadows

Shadows communicate elevation. Higher elements cast stronger shadows.

Class	Use For	Visual Weight
`shadow-control`	Buttons, inputs	Subtle lift
`shadow-surface`	Cards, list items	Light separation
`shadow-elevated`	Modals, popovers	Strong depth
`shadow-focus`	Focus rings	Keyboard navigation emphasis
`shadow-inner`	Pressed / active states	Inset effect

Control

Surface

Elevated

<button className="shadow-control rounded-control px-4 py-2">Action</button>
<div className="shadow-surface rounded-surface p-6">Card</div>
<div className="shadow-elevated rounded-overlay p-6">Modal</div>
<button className="focus:ring-2 focus:shadow-focus">Focusable</button>
<button className="active:shadow-inner">Pressable</button>

Drop & Text Shadows

Class	Use For
`drop-shadow-subtle`	Icons, small illustrations
`drop-shadow-elevated`	Floating icons, hero images
`text-shadow-subtle`	Small labels over images
`text-shadow-surface`	Headings over busy backgrounds
`text-shadow-overlay`	Hero text on photographs

Blur

Blur effects power glassmorphism and backdrop depth. Use sparingly — they can impact performance on lower-end devices.

Class	Value	Use For
`blur-control`	`8px`	Subtle hover effects
`blur-surface`	`12px`	Glass cards, frosted navbars
`blur-overlay`	`20px`	Modal backdrops

Glass Card

Frosted glass effect with blur

{/* Glass card */}
<div className="bg-white/20 backdrop-blur-surface border border-white/30 rounded-surface p-4">
  Glass content
</div>

{/* Glass navbar */}
<nav className="bg-surface/80 backdrop-blur-surface border-b border-border sticky top-0">
  Navigation
</nav>

{/* Modal backdrop */}
<div className="fixed inset-0 bg-black/50 backdrop-blur-overlay">
  <div className="bg-elevated rounded-overlay p-6">Modal</div>
</div>

Performance tip: Avoid nesting multiple blur layers. Use a single backdrop-blur-* on the outermost container.

Combining Effects

// Glass card — radius + shadow + blur
<div className="bg-surface/80 backdrop-blur-surface rounded-surface shadow-surface border border-border p-6">
  <h3 className="font-primary text-h3">Title</h3>
  <p className="text-para text-muted-content">Description</p>
</div>

// Interactive button — radius + shadow + states
<button className="bg-brand text-brand-content rounded-control shadow-control
  hover:shadow-surface active:shadow-inner focus:ring-2 focus:shadow-focus
  transition-all duration-200 px-4 py-2">
  Action
</button>

// Modal — backdrop blur + elevated shadow
<div className="fixed inset-0 z-50 flex items-center justify-center">
  <div className="absolute inset-0 bg-black/50 backdrop-blur-overlay" />
  <div className="relative bg-elevated rounded-overlay shadow-elevated p-6 max-w-md">
    Content
  </div>
</div>

CSS Variables

/* Radius */
--radius-control: 4px;
--radius-surface: 6px;
--radius-overlay: 8px;
--radius-full: 9999px;

/* Shadows */
--shadow-control: 0 1px 2px rgb(var(--shadow-color) / 0.05);
--shadow-surface: 0 1px 2px rgb(var(--shadow-color) / 0.05);
--shadow-elevated: 0 4px 6px -1px rgb(var(--shadow-color) / 0.1);
--shadow-focus: 0 10px 15px -3px rgb(var(--shadow-color) / 0.1);
--shadow-inner: inset 0 2px 4px rgb(var(--shadow-color) / 0.1);

/* Blur */
--blur-control: 8px;
--blur-surface: 12px;
--blur-overlay: 20px;

Effects