404 page

Try to navigate to a page that doesn't exist, like this one. You should see this:

single
How does it work?

Put simply, I'm using a radial-gradient as a pseudo-element, and updating the position of the gradient as I'm tracking the mouse position with a mouse event listener. I suggest the radial-gradient to be defined in a fixed element (absolute may work as well with some tweaking).


The radial-gradient is white in the very center to simulate the cursor. Past that, it goes from a slightly transparent black color (at 3% of the radius), to a highly transparent black color (at 120% of the radius), which, at this point, blends in with the background of the page.

Here is the CSS code snippet:

CSS

And here is the React code snippet:

JSX