:root { --cursor-flashlight-speed: .2s;  --cursor-flashlight-timing: linear; }  :root { --mouse-x: unset; --mouse-y: unset; transition: --mouse-x var(--cursor-flashlight-speed) var(--cursor-flashlight-timing), --mouse-y var(--cursor-flashlight-speed) var(--cursor-flashlight-timing); } @property --mouse-x { syntax: "<percentage> | <length>"; inherits: true; initial-value: 0px; } @property --mouse-y { syntax: "<percentage> | <length>"; inherits: true; initial-value: 0px; } .cursor-flashlight { position: relative; overflow: hidden; } .cursor-flashlight:before { mask: radial-gradient( circle at var(--mouse-x) var(--mouse-y), transparent 20px, currentColor 350px ); -webkit-mask: radial-gradient( circle at var(--mouse-x) var(--mouse-y), transparent 20px, currentColor 350px ); } .cursor-flashlight:after { content:""; position:absolute; width:100%; height:100%; top:0; left:0; bottom:0; right:0; z-index:-1; background-position: center; background-size: cover; background-repeat: no-repeat; }