Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to have a dark background and "reveal" color using my mouse?

I’m trying to code my own website for the first time and I’m running into some trouble. I’m following this tutorial in order to have a spotlight follow my mouse. Here’s the code. But I’d like to have a rainbow gradient across my entire homepage and have my spotlight show color as it’s moving across the page while keeping the other parts of the screen dark, more similar to how the original website, that the youtube tutorial is replicating, has shifting colors for the mouse as it moves across the screen.

My idea was to have different layers: the dark background, the "blob", the gradient, then a blur like the tutorial. The gradient wouldn’t show up against the dark background but when a white blob was beneath the gradient, then the colors would show up is my line of thinking. I’m currently at a point where it is simply the white blob and dark background. I’m wondering if this is even possible as I am thinking the issue is with the gradient’s blend modes interfering (although I don’t know if this is even the issue).

I’m also having issues having with safari. On chrome, I can get the smooth blob that tracks my mouse with a blur, however on safari, the blob either doesn’t appear or the tracking is off or the blob restarts it’s position every time I move my mouse. I know that different browsers require different things, but I was wondering if there are easier ways to make sure that both browsers can handle the site.

Also if you know another way of just having shifting colors for my blob while keeping the linear gradient that would be helpful too!

Here is my html, css, and javascript code. Thank you!

const blob = document.getElementById("blob");

window.onpointermove = event => {
  const {
    clientX,
    clientY
  } = event;

  blob.animate({
    left: `${clientX}px`,
    top: `${clientY}px`
  }, {
    duration: 2500,
    fill: "forwards"
  });
};
body {
  background-color: #222020;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  position: relative;
}

#gradient-color {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%), linear-gradient(121.28deg, #669600 0%, #ff0000 100%), linear-gradient(360deg, #0029ff 0%, #8fff00 100%), radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%), radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%);
  background-blend-mode: screen, color-dodge, overlay, difference, normal;
  z-index: 1;
  opacity: 0;
}

#blob {
  height: 34vmax;
  aspect-ratio: 1;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: white;
  mix-blend-mode: difference;
  opacity: 1;
  z-index: 2;
}

#blur {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 3;
  backdrop-filter: blur(12vmax);
}
<div id="gradient-color"></div>
<div id="blob"></div>
<div id="blur"></div>
<section class="showcase">
  <nav class="navbar vertical-center line line-vertical"></nav>
</section>
Tags:

2

Answers


  1. 0

    Yes there is!
    The code works with use of css z-index, so you shift colors for your blob while keeping the linear gradient

    document.addEventListener('mousemove', function(e) {
  const cave = document.querySelector('.cave');
  const x = e.clientX;
  const y = e.clientY;
  cave.style.setProperty('--x', `${x}px`);
  cave.style.setProperty('--y', `${y}px`);
  cave.style.background = `radial-gradient(circle at ${x}px ${y}px, transparent 10px, rgba(0, 0, 0, 1) 100px)`;
});
    body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  color: #fff;
  font-family: Arial, sans-serif;
  position: relative;
}

.content {
  z-index: 1;
}

.cave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  pointer-events: none;
  z-index: 2;
}
    <body>
  <div class="content">
    <h1>Welcome to the Cave</h1>
    <p>This is some hidden text that will be revealed by the light around the mouse cursor.</p>
    <img src="https://cdn.wallpapersafari.com/29/40/uFtGia.jpg" width=200>
  </div>
  <!--rest of your code-->

  <div class="cave"></div>

</body>
    Login or Signup to reply.
  2. 0

    Change the layers’ order, from back to front:

    • #gradient-color
    • #blob, using ::before and ::after as a huge black rectangle and a white circle, then mix-blend-mode: multiply to "see through" the white circle
    • #blur
    const blob = document.getElementById("blob");

window.onpointermove = event => {
  const {
    clientX,
    clientY
  } = event;

  blob.animate({
    left: `${clientX}px`,
    top: `${clientY}px`
  }, {
    duration: 2500,
    fill: "forwards"
  });
};
    body {
  background-color: #222020;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  position: relative;
}

#gradient-color {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%), linear-gradient(121.28deg, #669600 0%, #ff0000 100%), linear-gradient(360deg, #0029ff 0%, #8fff00 100%), radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%), radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%);
  background-blend-mode: screen, color-dodge, overlay, difference, normal;
  /*opacity: 0;*/
}

#blob {
  width: 1px;
  height: 1px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: visible;
  background-color: white;
  mix-blend-mode: multiply;
}

#blob::before {
  content: "";
  display: block;
  width: 200vw;
  height: 200vh;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #000;
}

#blob::after {
  content: "";
  display: block;
  width: 34vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}

#blur {
  height: 100%;
  width: 100%;
  position: fixed;
  backdrop-filter: blur(12vmax);
}
    <div id="gradient-color"></div>
<div id="blob"></div>
<div id="blur"></div>
<section class="showcase">
  <nav class="navbar vertical-center line line-vertical"></nav>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search