Click Ripple Card

<div class="rc" id="rc"><h3>Ripple Card</h3><p>Click anywhere on me to send a ripple from the click point.</p></div>

body{background:#f6f7fa}
.rc{position:relative;width:300px;border-radius:18px;padding:30px;background:linear-gradient(135deg,#5b6cff,#a855f7);color:#fff;font-family:system-ui,sans-serif;overflow:hidden;cursor:pointer;box-shadow:0 16px 40px rgba(91,108,255,.4)}
.rc h3{margin:0 0 8px}.rc p{margin:0;opacity:.9;line-height:1.6;font-size:14px}
.rc-rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);transform:scale(0);animation:rcr .7s ease-out;pointer-events:none}
@keyframes rcr{to{transform:scale(6);opacity:0}}

var rc=document.getElementById('rc');
rc.addEventListener('click',function(e){var r=rc.getBoundingClientRect(),s=document.createElement('span');s.className='rc-rip';var size=Math.max(r.width,r.height)/3;s.style.width=s.style.height=size+'px';s.style.left=(e.clientX-r.left-size/2)+'px';s.style.top=(e.clientY-r.top-size/2)+'px';rc.appendChild(s);setTimeout(function(){s.remove()},700)});