<body>
    <h1 id="shadow">Shadow</h1>
  </body>


* {
    box-sizing: border-box;
}

html {
    height: 100%;
    background-color: #22374C;
}

body {
    background: #ccc;
    background: url('https://marclopezavila.github.io/js-dynamic-shadow/img/background.jpg');
    background-size: cover;
    height: 100%;
    cursor: none;
    font-family: 'Noto Sans', sans-serif;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

h1 {
    margin: 0 auto 0 auto;
    font-size: 180px;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#lantern {
    position: fixed;
    background: url('https://marclopezavila.github.io/js-dynamic-shadow/img/glowstick.png') no-repeat;
    background-size: contain;
    width: 150px;
    height: 140px;
}

#lantern:before {
    position: absolute;
    top: -538px;
    left: -517px;
    height: 1200px;
    width: 1200px;
    content: '';
    border-radius: 50%;
    z-index: -4;
    background: -webkit-radial-gradient(rgba(116, 253, 176, 0.8) -1%, rgba(164, 255, 141, 0.49) 16%, rgba(156, 254, 132, 0.42) 21%, transparent 57%);
     background: -moz-gradient(rgba(116, 253, 176, 0.8) -1%, rgba(164, 255, 141, 0.49) 16%, rgba(156, 254, 132, 0.42) 21%, transparent 57%);
    background: radial-gradient(rgba(116, 253, 176, 0.8) -1%, rgba(164, 255, 141, 0.49) 16%, rgba(156, 254, 132, 0.42) 21%, transparent 57%);
   
}

#shadow {
    color: #E0E1D8;
    letter-spacing: 0.05em;
    text-shadow: rgb(60, 60, 60) 0px 0px 0px, rgb(55, 55, 55) 1.32813px 0.945185px 0.2px, rgb(50, 50, 50) 2.65625px 1.89037px 0.4px, rgb(45, 45, 45) 3.98438px 2.83556px 0.6px, rgb(40, 40, 40) 5.3125px 3.78074px 0.8px, rgb(35, 35, 35) 6.64063px 4.72593px 1px, rgb(30, 30, 30) 7.96875px 5.67111px 1.2px, rgb(25, 25, 25) 9.29688px 6.6163px 1.4px, rgb(20, 20, 20) 10.625px 7.56148px 1.6px, rgb(15, 15, 15) 11.9531px 8.50667px 1.8px, rgb(10, 10, 10) 13.2813px 9.45185px 2px, rgb(5, 5, 5) 14.6094px 10.397px 2.2px, rgb(0, 0, 0) 15.9375px 11.3422px 2.4px, rgb(0, 0, 0) 17.2656px 12.2874px 2.6px, rgb(0, 0, 0) 18.5938px 13.2326px 2.8px, rgba(0, 0, 0, 0.901961) 19.9219px 14.1778px 35px;
}
//Vanilla JS

window.onload = function() {

    function CoolShadow(config) {
        this.config =  config ? config : {'depth' : 15, 'color' : 'rgb(46, 46, 46)'};
        
        var body             = document.getElementsByTagName('body')[0],
            lanternContainer = document.createElement('div'),
            shadowText       = document.querySelector(config.el),
            self             = this;
        
        this.init = function() {
            lanternContainer.setAttribute('id', 'lantern');
            body.appendChild(lanternContainer);

            document.body.onmousemove = self.theShadow;
        };

        this.theShadow = function(e) {
            self.cursor = getCoords(e);
            lanternContainer.style.top  = (self.cursor.y - lanternContainer.offsetHeight/2) + 'px';
            lanternContainer.style.left = (self.cursor.x - lanternContainer.offsetWidth/2)  + 'px';

            shadowStyle(shadowText, self.config);
        };

        function shadowStyle(el, config) {
            var shadow   = [],
                color    = [],
                pos      = [],
                elCoords = getCoords(el),
                rgba     = getColorUnits(config.color);

            elCoords.relX =  (300 * elCoords.relX) / (window.innerWidth/2);
            elCoords.relY =  (240 * elCoords.relY) / (window.innerHeight/2);

            pos['x'] = ((elCoords.relX * 0.1) * -1);
            pos['y'] = ((elCoords.relY * 0.1) * -1);

            for(var i = 0; i < config.depth; i++) {
                color = [(rgba.r -= 5), (rgba.g -= 5 ), (rgba.b -= 5), rgba.a];
                shadow[i] = (pos['x']* (i*0.1)) + 'px '+ (pos['y'] * (i*0.1)) + 'px ' + i * 0.2+ 'px rgba(' + color + ')';
            }

            shadow.push((pos['x']* (i*0.1))+'px '+(pos['y'] * (i*0.1))+'px 35px rgba(0, 0, 0, 0.9)');

            el.style.textShadow = shadow.join(',');
        }

        //Utils
        function getCoords(e) {
            var coords;
            if(e instanceof HTMLElement) {
                coords = {
                    relX: (self.cursor.x - e.offsetLeft),
                    relY: (self.cursor.y - e.offsetTop),
                    x: e.offsetLeft,
                    y: e.offsetTop
                };

            } else {
                coords = {x: e.clientX, y: e.clientY};
            }
            return coords;
        }

        function getColorUnits(color) {
            var regExp = /\(([^)]+)\)/;
            var rgba = regExp.exec(color)[1].split(',');

            rgba = rgba.map(function(e) { return parseInt(e) });

            return {
                r: rgba[0],
                g: rgba[1],
                b: rgba[2],
                a: rgba[3] ? rgba[3] : 1
            };
        }

        //Init CoolShadow
        this.init();
    }

    new CoolShadow({
        'el'    : '#shadow',
        'depth' : 15,
        'color' : 'rgb(46, 46, 46)'
    });
};
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.