Circular Spotlight Example

A circular spotlight effect that always follows the cursor on mouse movement.

Can be used to highlight critical elements and new features on the webpage.

Built using CSS background: radial-gradient property.

Usage

.spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(50px 50px at center center, transparent, transparent 100px, rgba(0, 0, 0, 0.6) 150px);
  opacity: 0;
  animation: fadein 2s 1s 1 both;
}