Skip to main content

Shadow Utilities

NuvoUI's shadows system gives you a versatile set of shadow utilities, mixins, and hover variants to enhance your UI elements. Shadows are defined based on preset sizes and colors:

  • Sizes: sm, md, lg, xl, hero, and monster.
  • Colors: Use the default shade (default) or darker versions (e.g. dark, darker, darkest).

Overview​

NuvoUI provides a comprehensive set of shadow utilities that allow you to:

  • Apply shadows of different sizes
  • Use custom shadow colors
  • Create inset shadows
  • Apply shadows conditionally (on hover, focus, or active states)
  • Use responsive shadow variants
  • Create elevation levels for layering elements

Basic Usage​

Apply shadows to any element using the .shadow-{size} utility classes:

Shadow Sizes​

NuvoUI provides six different shadow sizes:

ClassDescription
.shadow-noneRemoves all shadows
.shadow-smSmall, subtle shadow (1px y-offset, 2px blur)
.shadow-mdMedium shadow (4px y-offset, 6px blur)
.shadow-lgLarge shadow (10px y-offset, 15px blur)
.shadow-xlExtra large shadow (20px y-offset, 25px blur, -5px spread)
.shadow-heroHero shadow with positive spread (20px y-offset, 25px blur, 5px spread)
.shadow-monsterMonster shadow with large blur and spread (20px y-offset, 55px blur, 20px spread)

Shadow Colors​

Customize your shadow color with modifiers:

Inset Shadows​

Create inner shadows with the .shadow-inset-{size} utility classes:

You can also combine inset shadows with color variants:

Interactive Shadows​

Apply shadows on hover, focus, or active states:

Color Variants for Interactive States​

Combine interactive states with color variants:

Responsive Shadows​

Apply different shadows at different screen sizes:

Remove Shadows​

Remove shadows with the .shadow-none utility:

Elevation System​

Use elevation classes to create layered interfaces:

Card Example​

Combine shadows with other utilities for common UI patterns:

Complex Examples​

Common UI Patterns​

Card Components​

Button Styles​

Shadow for Floating UI​

Depth and Layering​

Inset Shadow Examples​

Shadow Structure​

The shadow system is built on a structured format with consistent values:

SCSS Mixins​

For more direct control in your SCSS, you can use the shadow mixins:

Shadow Mixins​

MixinDescriptionParameters
@include NuvoUI.shadow($size, $color)Applies a shadow with the specified size and color$size: 'sm', 'md', 'lg', 'xl', 'hero', 'monster' (default: 'md')
$color: 'default', 'dark', 'darker', 'darkest' (default: 'default')
@include NuvoUI.shadow-inset($size, $color)Applies an inset shadow with the specified size and color$size: 'sm', 'md', 'lg', 'xl', 'hero', 'monster' (default: 'md')
$color: 'default', 'dark', 'darker', 'darkest' (default: 'default')
@include NuvoUI.shadow-base($x, $y, $blur, $spread, $color)Applies a custom shadow with specific properties$x: X-offset
$y: Y-offset
$blur: Blur radius
$spread: Spread radius
$color: Shadow color

Basic SCSS Examples​

Interactive and Responsive Examples​

Building Components with Shadow Mixins​

Available Shadow Colors​

The shadow system uses the following color variables:

Best Practices​

Shadow Hierarchy​

  • Higher shadows (larger, more spread) indicate elements closer to the user
  • Lower shadows (smaller, less spread) indicate elements further away
  • Avoid using too many different shadow levels in one view
  • Be consistent with shadow usage across your application

Performance Considerations​

  • Large, blurry shadows (like monster) are more resource-intensive
  • Consider using simpler shadows on elements that animate frequently
  • Test performance on lower-end devices when using many shadowed elements
  • Adding will-change: transform or transform: translateZ(0) can help with shadow performance in some cases

Accessibility​

  • Don't rely solely on shadows to indicate interactivity
  • Ensure sufficient contrast between elements of different elevations
  • Consider users with reduced motion preferences
  • Test with high contrast modes and dark themes

Shadow and Color​

  • Default shadows use black with varying opacity for neutral appearance
  • Consider colored shadows for branded elements or to establish visual themes
  • Darker shadows create more dramatic depth effects
  • Shadow opacity should generally decrease as blur and spread increase

Responsive Design​

  • Consider using smaller shadows on mobile devices
  • Larger screens can handle more dramatic shadows without overwhelming the UI
  • Use breakpoint-specific shadow classes for optimal shadow appearance across devices