Shadows

Shadows can be added to elements with the .{shadow}-{$size} utility class. For example, the class.shadow-md class will add a medium shadow-box to and element. All the box-size properties for each size can be found below in the Variables section.

        
<div class="shadow-sm bg-white-500 rounded-sm ..."></div>
<div class="shadow-md bg-white-500 rounded-sm ..."></div>
<div class="shadow-lg bg-white-500 rounded-sm ..."></div>
<div class="shadow-xl bg-white-500 rounded-sm ..."></div>
        
    

Set inner shadows

A shadow can also be made inset by using the .shadow-inner utility class. It is subtle but a nice way to accent form controls!

        
<input class="p-5 w-full shadow-inner rounded-sm bg-white-500 text-dark-grey-800 border-grey-200 focus:outline-indigo-200 outline-none font-lg" placeholder="Email"/>
        
    

Remove shadows

A shadow can removed from an element easily by using the .shadow-none utility class.

        
<div class="shadow-none ...">No Shadow</div>
        
    

// 10. Shadow
// ==========================================================================

$xs-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
$sm-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$reg-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
$md-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$lg-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
$xl-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
$two-xl-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

$shadows: (
  xs: $xs-shadow,
  sm: $sm-shadow,
  reg: $reg-shadow,
  md: $md-shadow,
  lg: $lg-shadow,
  xl: $xl-shadow,
  2xl: $two-xl-shadow,
  none: none,
  outline: 0 0 0 2px rgba(66, 153, 225, 0.5),
  inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06),
);
$shadow-variants: ("focus", "active");