How to make this illumination effect with CSS

Crafting the perfect light effect

Illuminations aren't about brightness alone—shadows and movement play a key role too. Make your CSS glow with lifelike gradients and dynamic lights.

Dynamic gradient: Follow the leader (aka cursor)

With JavaScript and CSS variables, make the gradient's position sync with mouse movements:

// Mouse, the Jedi master, shows gradient the art of moving
document.onmousemove = (e) => {
  const x = e.clientX / window.innerWidth * 100;
  const y = e.clientY / window.innerHeight * 100;
  document.documentElement.style.setProperty('--posX', `${x}%`);
  document.documentElement.style.setProperty('--posY', `${y}%`);
};


In your CSS, make the gradient padawan follow the master's trail:

.element {
  /* Directions from master saved here */
  --posX: 50%;
  --posY: 50%;
  
  /* This radial gradient is an obedient Padawan */
  background: radial-gradient(circle at var(--posX) var(--posY), white, transparent);
  transition: background-position 0.5s ease;  /* Smooths things out */
}


Text reveal: Now you see me!

Add an air of mystery with a hidden text effect. This feat of magic, is achieved with a combination of -webkit-background-clip: text and transparent text color:

.text-reveal {
  color: transparent;  /* The text's invisible cloak */
  background: linear-gradient(#000, #000);  /* Underneath the cloak */
  -webkit-background-clip: text;  /* The magic spell! */
  background-clip: text;
}


Advanced illumination techniques

Ready to add more razzle-dazzle to your website? Explore these advanced techniques to keep your users engaged:

Shimmer and Shine: Enhancing Glow

Give your elements some extra shine with box-shadows. But why stop at the subtle? Unleash the full power of clipPath for a spotlight reveal!

.scan-effect {
  box-shadow: 0 0 15px 5px #fff;  /* The extra dazzle */
  clip-path: circle(50% at var(--posX) var(--posY)); /* Spotlight, spotlight, on the element */
}


Responsive light effects

For your light effects to be universally stunning, ensure they're responsive. Use percentage-based values and transform: translate for precision positioning:

.scan-effect {
  width: 100%;  /* Light must cover the stage fully */
  height: 100%;
  transform: translateX(var(--posX)) translateY(var(--posY));  /* Moving with grace */
}


Triggering animations

Mirror a user's action to create an interactive light show. Switch on the css transitions using JavaScript triggers:

// Apparently, button presses have the power to invoke animations.
document.querySelector('.button').onclick = () => {
  document.querySelector('.element-to-animate').classList.add('scan-animation');
};


Complemented by this CSS:

.scan-animation {
  animation: scan 3s forwards; // They see me scanning, they liking
}
