Glassmorphism Working Calculator

HTML <div class="container" data-tilt data-tilt-full-page-listening data-tilt-axis="x"> <form class="calculator" name="calc"> <input type="text" readonly class="value" name="txt"/> <span class="num clear" onclick="calc.txt.value = ''">c</span> <span class="num" onclick="document.calc.txt.value += '/'">/</span> <span class="num" onclick="document.calc.txt.value += '*'">*</span> <span class="num" onclick="document.calc.txt.value += '7'">7</span> <span class="num" onclick="document.calc.txt.value += '8'">8</span> <span class="num" onclick="document.calc.txt.value += '9'">9</span> <span class="num" onclick="document.calc.txt.value += '-'">-</span> <span class="num" onclick="document.calc.txt.value += '4'">4</span> <span class="num" onclick="document.calc.txt.value += '5'">5</span> <span class="num" onclick="document.calc.txt.value += '6'">6</span> <span class="num plus" onclick="document.calc.txt.value += '+'">+</span> <span class="num" onclick="document.calc.txt.value += '1'">1</span> <span class="num" onclick="document.calc.txt.value += '2'">2</span> <span class="num" onclick="document.calc.txt.value += '3'">3</span> <span class="num" onclick="document.calc.txt.value += '0'">0</span> <span class="num" onclick="document.calc.txt.value += '00'">00</span> <span class="num" onclick="document.calc.txt.value += '.'">.</span> <span class="num equal" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span> </form> </div> CSS * { font-family: 'Quicksand', sans-serif; margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #031323; } body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#FA9D74, #EB0069); clip-path: polygon(30% 10%, 50% 40%, 30% 75%, 10% 40%); } body::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#F50202, #1928F5); clip-path: circle(20% at 70% 75%); } .container { position: relative; background: rgba(255, 255, 255, 0.05); border-radius: 6px; overflow: hidden; z-index: 10; backdrop-filter: blur(15px); border-top: 1px solid rgba(255, 255, 255, 0.2); border-left: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2); } .container .calculator { position: relative; display: grid; } .container .calculator .value { grid-column: span 4; height: 140px; width: 300px; text-align: right; border: none; outline: none; padding: 10px; font-size: 30px; background: transparent; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.05); border-right: 1px solid rgba(255, 255, 255, 0.05); } .container .calculator span { display: grid; align-items: center; justify-items: center; height: 75px; width: 75px; color: #fff; font-weight: 400; cursor: pointer; font-size: 20px; user-select: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); border-right: 1px solid rgba(255, 255, 255, 0.05); transition: 0.5s; } .container .calculator span:hover { transition: 0s; background: rgba(255, 255, 255, 0.05); } .container .calculator span:active { background: #14ff47; color: #192f00; font-size: 24px; font-weight: 500; } .container .calculator .clear { grid-column: span 2; width: 150px; background: rgba(255, 255, 255, 0.05); } .container .calculator .plus { grid-row: span 2; height: 150px; } .equal { background: rgba(255, 255, 255, 0.05); } @media (max-width: 768px) { body::before { max-width: 75vw; max-height: 75vh; } } JavaScript No JavaScript