Gradient Text Spotlight — Playground

{CF} CodeFronts Back to CSS Hero Sections Gradient Text Spotlight Pure CSS

Edit any tab — preview updates live

.hs-gt {
  width: 100%;
  min-height: clamp(220px, 28vh, 100vh);
  padding: clamp(20px, 4vh, 80px) clamp(16px, 4vw, 40px);
  background: #0a0a14;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  font-family: system-ui, sans-serif; color: #f0eeff; text-align: center;
}
.hs-gt-eye {
  font-family: monospace; font-size: clamp(9px, 1.3vw, 11px);
  letter-spacing: 0.16em; color: #a78bfa; text-transform: uppercase;
}
.hs-gt-h {
  margin: 0; font-size: clamp(28px, 7vw, 88px);
  font-weight: 900; line-height: 1; letter-spacing: -0.03em; max-width: 900px;
  background: linear-gradient(120deg,
    #7c6cff 0%,
    #ff6c8a 25%,
    #ffd479 50%,
    #2eb88a 75%,
    #3de8f5 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: hs-gt-shine 8s linear infinite;
}
.hs-gt p { margin: 0; font-size: clamp(11px, 1.6vw, 17px); color: #b8b6d4; max-width: 540px; line-height: 1.5; }
.hs-gt-cta { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.hs-gt-pri, .hs-gt-sec {
  padding: 9px 20px; border-radius: 7px;
  font-size: clamp(11px, 1.5vw, 14px); font-weight: 700;
  text-decoration: none;
  transition: filter 0.15s, background 0.15s;
}
.hs-gt-pri { background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff; }
.hs-gt-pri:hover { filter: brightness(1.12); }
.hs-gt-sec { background: rgba(255,255,255,0.06); color: #f0eeff; border: 1px solid rgba(255,255,255,0.18); }
.hs-gt-sec:hover { background: rgba(255,255,255,0.14); }
@keyframes hs-gt-shine { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .hs-gt-h { animation: none; background-position: 0 0; }
}

Live preview Ready