Shadows

Shadow utilities add depth, separation, and visual hierarchy between interface elements. They help surfaces feel layered, improve readability, and communicate elevation throughout a design system.

FrontAlign provides a simple shadow scale that works consistently across cards, modals, dropdowns, overlays, glass panels, and interactive UI components.

All shadow utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Class	Elevation	Common use
`shadow-none`	`none`	Remove shadows from a surface.
`shadow-tiny`	`minimal`	Subtle containers, quiet surfaces, small cards.
`shadow`	`default`	Standard cards and grouped content blocks.
`shadow-medium`	`medium`	Feature cards and interactive components.
`shadow-large`	`strong`	Dropdowns, popovers, notifications, overlays.
`shadow-xlarge`	`maximum`	Modals, drawers, floating panels, premium surfaces.
`shadow-inner`	`inset`	Input containers, pressed states, inner depth.

Usage

Use shadow for a clean default elevation on cards, panels, and grouped content.

<div class="shadow rounded-3">
  Card Content
</div>

Tiny shadow

Use shadow-tiny for subtle separation when the surface should remain quiet.

<div class="shadow-tiny border rounded-3">
  Subtle Surface
</div>

Default shadow

The default shadow utility is ideal for standard cards and regular content panels.

<div class="shadow rounded-3">
  Standard Card
</div>

Medium shadow

Use shadow-medium for feature cards, highlighted surfaces, and interactive components.

<div class="shadow-medium rounded-4">
  Feature Card
</div>

Large shadow

Use shadow-large for prominent UI elements that need stronger separation from the page.

<div class="shadow-large rounded-4">
  Highlighted Content
</div>

Extra large shadow

Use shadow-xlarge for floating panels, dialogs, modals, and premium surfaces.

<div class="shadow-xlarge rounded-5">
  Floating Surface
</div>

Shadow scale

Utility	Visual weight	Recommended use
`shadow-none`	`0`	Remove elevation at a breakpoint, state, or component variant.
`shadow-tiny`	`1`	Very subtle depth for small surfaces.
`shadow`	`2`	Default depth for cards and panels.
`shadow-medium`	`3`	Interactive cards and emphasized surfaces.
`shadow-large`	`4`	Dropdowns, overlays, notifications, and popovers.
`shadow-xlarge`	`5`	Highest elevation for modals, drawers, and floating surfaces.
`shadow-inner`	`inset`	Depth inside inputs, pressed controls, and inner panels.

Inner shadow

Inset shadows create depth inside an element rather than outside it. Use shadow-inner when the component should feel pressed, recessed, or contained.

<div class="shadow-inner rounded-3">
  Input Container
</div>

Common use cases:

Input groups
Glassmorphism effects
Pressed buttons
Search containers
Dashboard widgets

Cards

Standard card

Use shadow with a border and radius for clean application cards.

<div class="shadow rounded-3 border">
  Card Content
</div>

Premium feature card

Use shadow-medium by default and increase elevation on hover for a premium interactive feel.

<div
  class="shadow-medium rounded-4 hover:shadow-large"
>
  Premium Feature
</div>

Dropdowns

Dropdowns generally benefit from medium or large shadows because they appear above surrounding content.

<div class="shadow-large rounded-3">
  Dropdown Menu
</div>

Modals

Modals typically require the highest elevation level so they clearly sit above the page and backdrop.

<div class="shadow-xlarge rounded-5">
  Modal Dialog
</div>

Glass interface

Combining blur and shadows creates a premium glassmorphism effect. Add a border and radius to keep the glass panel readable and polished.

<div
  class="backdrop-blur shadow-large border rounded-4"
>
  Glass Card
</div>

Hover elevation

Shadows work especially well with hover utilities. Increase shadow strength on hover to communicate interactivity.

<div
  class="shadow hover:shadow-large"
>
  Interactive Card
</div>

Lift effect

Combine hover shadow and transform utilities to create a natural elevation animation.

<div
  class="shadow hover:shadow-large hover:translate-y-2"
>
  Feature Card
</div>

Real-world examples

Dashboard widget

<div class="shadow rounded-3 border">
  Statistics Widget
</div>

Pricing card

<div class="shadow-medium rounded-5">
  Professional Plan
</div>

Floating notification

<div class="shadow-large rounded-3">
  Notification Message
</div>

Search panel

<div class="shadow-inner rounded-pill">
  Search Input
</div>

Combining utilities

Shadow + border

Use a border with shadow when the surface needs clearer separation in both light and dark interfaces.

<div class="border shadow rounded-3">
  Surface
</div>

Shadow + background

Pair shadows with a background utility so elevation has a visible surface to lift.

<div class="bg-white shadow-medium rounded-4">
  Content
</div>

Shadow + opacity

Opacity can be useful for floating overlays, translucent panels, and layered interfaces.

<div class="shadow opacity-95 rounded-4">
  Overlay Panel
</div>

Shadow + hover

Hover shadows work best when combined with a transform or transition utility.

<div
  class="shadow hover:shadow-large hover:scale-105"
>
  Interactive Component
</div>

Choosing the right shadow

Component	Recommended utility	Why
Subtle containers	`shadow-tiny`	Creates light separation without making the layout feel heavy.
Cards	`shadow`	Provides balanced default elevation for content surfaces.
Feature cards	`shadow-medium`	Adds more presence to highlighted or interactive content.
Dropdowns	`shadow-large`	Clearly separates floating menus from the page behind them.
Modals	`shadow-xlarge`	Communicates the highest visual layer above the interface.
Inputs	`shadow-inner`	Creates recessed depth inside the component.

Best practices

Use shadows consistently across the interface.
Increase shadow strength as component elevation increases.
Prefer subtle shadows for content-heavy applications.
Combine shadows with borders for clearer separation.
Use hover shadows to communicate interactivity.
Reserve shadow-xlarge for modals, drawers, and floating surfaces.
Use shadow-inner only when depth inside the component is desired.