Hover Spotlight

CSS

/* Hover Spotlight — generated with TEXT-FX
 * HTML: the element needs a data-text attribute equal to its text.
 * Font: 'Space Mono', monospace (load from Google Fonts).
 */

.text-effect {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  position: relative;
  color: hsl(163 18% 30%);
  transition: color 0.52s ease;
  cursor: pointer;
}
.text-effect::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: hsl(163 95% 62%);
  text-shadow:
    0 0 8px hsl(163 100% 60%),
    0 0 22px hsl(163 100% 60%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 18%, transparent 42%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 18%, transparent 42%);
  -webkit-mask-size: 30% 60%;
  mask-size: 30% 60%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: -webkit-mask-size 0.52s ease, mask-size 0.52s ease;
  pointer-events: none;
}
.text-effect:hover::after {
  -webkit-mask-size: 250% 250%;
  mask-size: 250% 250%;
}
.text-effect::after {
  animation: text-effect-sweep 3.2s ease-in-out infinite;
}
.text-effect:hover::after {
  animation: none;
}

@keyframes text-effect-sweep {
  0%, 100% { -webkit-mask-size: 28% 55%; mask-size: 28% 55%; }
  50% { -webkit-mask-size: 40% 75%; mask-size: 40% 75%; }
}

HTML

This effect needs the markup below (per-letter spans, SVG defs, or a data-text attribute).

<style>
.text-effect {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  position: relative;
  color: hsl(163 18% 30%);
  transition: color 0.52s ease;
  cursor: pointer;
}
.text-effect::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: hsl(163 95% 62%);
  text-shadow:
    0 0 8px hsl(163 100% 60%),
    0 0 22px hsl(163 100% 60%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 18%, transparent 42%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 18%, transparent 42%);
  -webkit-mask-size: 30% 60%;
  mask-size: 30% 60%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: -webkit-mask-size 0.52s ease, mask-size 0.52s ease;
  pointer-events: none;
}
.text-effect:hover::after {
  -webkit-mask-size: 250% 250%;
  mask-size: 250% 250%;
}
.text-effect::after {
  animation: text-effect-sweep 3.2s ease-in-out infinite;
}
.text-effect:hover::after {
  animation: none;
}

@keyframes text-effect-sweep {
  0%, 100% { -webkit-mask-size: 28% 55%; mask-size: 28% 55%; }
  50% { -webkit-mask-size: 40% 75%; mask-size: 40% 75%; }
}
</style>

<div data-text="Your text" class="text-effect">Your text</div>

Related Interactive & Advanced effects

• Mirror Reflection