Shadow

Apply shadow effects to widgets using predefined elevation keys or arbitrary pixel values.

• Basic Usage
• Quick Reference
• Arbitrary Values
• Responsive Design
• Customizing Theme
• Related Documentation

WCard(
  className: 'shadow-lg p-4 bg-white dark:bg-gray-800',
  child: WText('Large Shadow', className: 'text-gray-700 dark:text-gray-200'),
)

Basic Usage

Use the shadow- prefix followed by a size key to apply a box shadow:

WCard(
  className: 'shadow p-4 bg-white dark:bg-gray-800',
  child: WText('Default shadow', className: 'text-gray-900 dark:text-white'),
)

WCard(
  className: 'shadow-xl p-4 bg-white dark:bg-gray-800',
  child: WText('Extra large shadow', className: 'text-gray-900 dark:text-white'),
)

Shadows are rendered as a BoxShadow with color: Colors.black.withOpacity(0.1), the elevation as blurRadius, and offset: Offset(0, elevation / 2).

Quick Reference

Syntax

shadow-[size]
shadow

Using shadow without a size applies the default key (2px blur radius).

Arbitrary Values

Set any shadow blur radius with bracket notation. The value is used directly as pixels:

shadow-[]

WCard(
  className: 'shadow-[6] p-4 bg-white dark:bg-gray-800',
  child: WText('Custom Shadow', className: 'text-gray-700 dark:text-gray-200'),
)

WCard(
  className: 'shadow-[20] p-4 bg-white dark:bg-gray-800',
  child: WText('Very large custom shadow'),
)

Responsive Design

Adjust shadow intensity at different breakpoints:

WCard(
  className: 'shadow-sm md:shadow-lg lg:shadow-2xl p-4 bg-white dark:bg-gray-800',
  child: WText('Responsive shadow'),
)

Customizing Theme

Override shadow keys or add new ones with WindTheme.setShadowSize:

// Override an existing key
WindTheme.setShadowSize('lg', 10.0);
// shadow-lg now uses 10px blur radius

// Add a custom key
WindTheme.setShadowSize('card', 6.0);
WCard(className: 'shadow-card p-4 bg-white', child: WText('Card shadow'))

See Customizing Shadows for details.

Related Documentation

• Customizing Shadows — override the default shadow scale.
• Background Color — complement shadows with background colors.
• Border Radius — rounded corners pair well with shadows.
• Pixel Factor — how the pixel factor affects sizing calculations.