Shadows

Classic shadows

Class Properties
shadow-sm box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
shadow-md box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
shadow-lg box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
shadow-xl box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
shadow-2xl box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
shadow-inner-sm box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
shadow-inner-md box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);
shadow-inner-lg box-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.2);
shadow-inner-xl box-shadow: inset 0 6px 12px 0 rgba(0, 0, 0, 0.2);
shadow-none box-shadow: 0 0 #0000;

Basic usage

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-2xl

shadow-inner-sm

shadow-inner-md

shadow-inner-lg

shadow-inner-xl

Smooth shadows

Class Properties
shadow-smooth-sm box-shadow: 0px 4px 68px rgba(0, 0, 0, 0.0434026), 0px 1.46007px 24.8211px rgba(0, 0, 0, 0.0621193), 0px 0.708835px 12.0502px rgba(0, 0, 0, 0.0778807), 0px 0.347484px 5.90723px rgba(0, 0, 0, 0.0965974), 0px 0.137396px 2.33573px rgba(0, 0, 0, 0.14);
shadow-smooth-md box-shadow: 0 1.9px 3.6px rgba(0, 0, 0, 0.13), 0 5.4px 10px rgba(0, 0, 0, 0.085), 0 13px 24.1px rgba(0, 0, 0, 0.065), 0 43px 80px rgba(0, 0, 0, 0.045);
shadow-smooth-lg box-shadow: 0 4.3px 3.6px rgba(0, 0, 0, 0.13), 0 11.8px 10px rgba(0, 0, 0, 0.085), 0 28.3px 24.1px rgba(0, 0, 0, 0.065), 0 94px 80px rgba(0, 0, 0, 0.045);
shadow-smooth-xl box-shadow: 0 2.8px 2.5px rgba(0, 0, 0, 0.14), 0 6.7px 6.1px rgba(0, 0, 0, 0.093), 0 12.5px 11.5px rgba(0, 0, 0, 0.08), 0 22.3px 20.5px rgba(0, 0, 0, 0.073), 0 41.8px 38.4px rgba(0, 0, 0, 0.066), 0 100px 92px rgba(0, 0, 0, 0.053) ;

Basic usage

shadow-smooth-sm

shadow-smooth-md

shadow-smooth-lg

shadow-smooth-xl