<body>
<div class="front"><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam dolor quibusdam sed reprehenderit asperiores, doloribus ullam aspernatur dicta autem deserunt. Recusandae eum est, harum fugit obcaecati sed. Ea, blanditiis quasi!</p></div>
  
<div class="back"><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam dolor quibusdam sed reprehenderit asperiores, doloribus ullam aspernatur dicta autem deserunt. Recusandae eum est, harum fugit obcaecati sed. Ea, blanditiis quasi!</p></div>
</body>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

div {
  position: absolute;
    width: 40rem;
  height: 10rem;
}

div.back {

  background: red;
  filter: blur(2px);
}

div.front {
  background: blue;
  z-index: 1;
}
var cursorClip = document.querySelector("div.front");

var x = "25%";
var y = "30%";

cursorClip.style.clipPath = `circle(7% at ${x} ${y})` ;
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.