Dynamic CSS Box Shadow Generator – zShadows.css

Preview:

Description:

zShadows.css is a CSS library that dynamically applies CSS box shadows to block-level elements based on the position of the light source you specify.

How to use it:

1. Add the zShadows.css stylesheet to the page.

<link rel="stylesheet" href="./zShadows.css">

2. Add the zBoxShadow class to the element and done.

<div id="card" class="zBoxShadow">
  <h1 id="text" class="zTextShadow">
    Hello, world!
  </h1>
</div>

3. Customize the position of the light source.

:root {
  --light-position-x: 0px;
  --light-position-y: 0px;
}