GLASS CARDS
by Rehmat (Animated Creativity) - MIT License

1. Stylesheet:  <link rel="stylesheet" href="glass.css">
2. Card:        <div class="glass"> ... </div>
3. Spotlight:   <div data-glass-spot> ...cards... </div>
                <script src="glass.js" defer></script>

Glass needs a colourful background behind it (photo, gradient, shapes).

Styles:  glass | glass glass-frost | glass glass-clear | glass glass-dark | glass glass-light
         glass glass-tint  with  style="--glass-color:#ff5c8a"
Parts:   glass glass-btn | glass glass-pill

CSS variables: --glass-blur  --glass-bg  --glass-border  --glass-radius  --glass-spot  --glass-spot-size

From JavaScript:  var s = GlassSpot(wrapper); s.refresh(); s.move(x, y); s.off();

Open index.html to try the sliders and copy your CSS.

More free kits and custom work: https://animatedcreativity.com/
