component

Box Shadow

Controls an element's box shadow. Breakpoints modifiers

Class Properties
has-shadow-none box-shadow: none;
has-shadow-xs box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
has-shadow-sm box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
has-shadow-md box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.26);
has-shadow-lg box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
has-shadow-xl box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.25);
has-shadow-xxl box-shadow: 0px 15px 30px -3px rgba(0, 0, 0, 0.2);

Basic usage

has-shadow-xs
has-shadow-sm
has-shadow-md
has-shadow-lg
has-shadow-xl
has-shadow-xxl

Changing shadow size on diferent screens:

from xs to lg
from sm to xl
from md to xxl

Resize your browser to see it in action.

Variables 

  --shadow-none: none;
  --shadow-xs : 0px 1px 3px rgba(0, 0, 0, 0.3) ;
  --shadow-sm : 0px 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-md : 0px 4px 10px rgba(0, 0, 0, 0.26);
  --shadow-lg : 0px 8px 20px rgba(0, 0, 0, 0.2);
  --shadow-xl : 0px 12px 25px rgba(0, 0, 0, 0.25);
  --shadow-xxl: 0px 15px 30px -3px rgba(0, 0, 0, 0.2);