Shadow Helpers

Bonsai includes a collection of helpers for creating beautiful shadow effects to any box element.

--shadow

The --shadow helper is the default shadow helper and adds a smooth box shadow to an element. Value of this helper collectively sets the offset, blur and intensity of the shadow.

<div style="--shadow:4;"> ... </div>

--levitate

The --levitate helper translates the element vertically and adds a smooth box shadow. These cobined gives the effect of a element levitating from the page. Value of this helper collectively sets the offset, blur and intensity of the shadow and the translate distance.

<div style="--levitate:4;"> ... </div>

--shadow-soft

The --shadow-soft helper adds a soft box shadow to an element. Value of this helper collectively sets the offset, blur and intensity of the shadow.

<div style="--shadow-soft:4;"> ... </div>

--shadow-hard

The --shadow-hard helper adds a hard box shadow to an element. Value of this helper collectively sets the offset, blur and intensity of the shadow.

<div style="--shadow-hard:4;"> ... </div>

--shadow-vert

The --shadow-vert helper adds a box shadow below the element. Value of this helper collectively sets the offset, blur and intensity of the shadow.

<div style="--shadow-vert:4;"> ... </div>

--shadow-inset

The --shadow-inset helper adds an inset box shadow to the element. Value of this helper collectively sets the offset, blur and intensity of the shadow.

<div style="--shadow-inset:10;"> ... </div>

--shadow-hvr

The --shadow-hvr helper adds the same effect as the --shadow helper however is only applied on hover of the element.

<div style="--shadow-hvr:8;"> ... </div>

--levitate-hvr

The --levitate-hvr helper adds the same effect as the --levitate helper however is only applied on hover of the element.

<div style="--levitate-hvr:8;"> ... </div>