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.