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.

sample
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
<div style="--shadow:3;"> ... </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.

sample
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
<div style="--levitate:3;"> ... </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.

sample
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
<div style="--shadow-soft:3;"> ... </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.

sample
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
<div style="--shadow-hard:3;"> ... </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.

sample
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
<div style="--shadow-vert:3;"> ... </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.

sample
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
<div style="--shadow-inset:3;"> ... </div>

--shadow-hvr

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

sample
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
<div style="--shadow-hvr:3;"> ... </div>

--levitate-hvr

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

sample
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
<div style="--levitate-hvr:3;"> ... </div>