OGXOGX

Shadows

Box shadow utilities

Built-in Shadows

ClassDescription
shadow-smSmall subtle shadow
shadowDefault shadow
shadow-mdMedium shadow
shadow-lgLarge shadow
shadow-xlExtra large shadow
shadow-2xlLargest shadow

Usage

stack('bg-white shadow-lg rounded-xl p-8', [
  span('text-zinc-900', 'Card content'),
]);

Premium Shadow

Multi-layer shadow for depth:

stack('shadow-premium', [
  // Three-layer soft shadow effect
]);

The premium shadow applies:

  • Primary shadow at 25% opacity
  • Secondary shadow at 10% opacity
  • Tertiary diffuse shadow at 5% opacity

Colored Shadows

Use arbitrary values for colored shadows:

'shadow-[0_20px_50px_-12px_rgba(99,102,241,0.25)]'

With Fluent API

fluent(stack('p-8'))
  .bg('white')
  .rounded('xl')
  .shadow('lg')
  .element;

On this page