<div id="app"></div>body {
height: 100vh;
margin:0;
display: grid;
place-items: center;
}
.card {
--x: -500px;
--y: -500px;
height: 60%;
width: 70vw;
padding: 1rem;
box-sizing: border-box;
display: flex;
flex-direction:column;
background: radial-gradient(circle at var(--x) var(--y), #66a5ad 0%, #003b46 25%);
border-radius: 15px;
color: #fff;
}
const Hello = () => {
const foo = e => {
const x = e.pageX - e.currentTarget.offsetLeft;
const y = e.pageY - e.currentTarget.offsetTop;
e.currentTarget.style.setProperty("--x", `${x}px`);
e.currentTarget.style.setProperty("--y", `${y}px`);
};
const doo = (e) => {
e.currentTarget.style.setProperty("--x", `-500px`);
e.currentTarget.style.setProperty("--y", `-500px`);
}
return (
<div className="card" onMouseMove={foo} onMouseLeave={doo}>
<h2>Heading</h2>
<p>
Lorem ipsum isd asdj aker kjdod klkda mnci sdejknw dflijewmkn sdfij sdfkj
lkje bnasda meoi alknv asolijf lknsas loijaewr lkndf asdio welnr joapo knerw
lkner knasdf oijerto knjdfao dfuiookj kojsdfi nwejro noaidsf njiewr
nsdjfoadin ihjerwe
</p>
</div>
);
};
ReactDOM.render(<Hello />, document.getElementById("app"));
External CSS
This Pen doesn't use any external CSS resources.