zShadows is a simple CSS library for generating shadows from a point light source. Apply a .zBoxShadow style to any element whose box-shadow you want to automatically calculate. Similarly, use the .zTextShadow style to calculate its text-shadow.

border shadow css, css box shadow examples, soft box shadow css, inner shadow css, box shadow css tricks, image shadow css, box shadow vs drop shadow

How to make use of it:

1. Add the zShadows.css style sheet to the page.

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

2. Add the zBoxShadow class to the element.

<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;
}

Dynamic CSS Box Shadow Generator, zShadows Plugin/Github, add multiple box shadows css

See Demo And Download

Official Website(kinseywk): Click Here

This superior jQuery/javascript plugin is developed by kinseywk. For extra Advanced usage, please go to the official website.