Animated Headline — Playground

{CF} CodeFronts Back to CSS Hero Sections Animated Headline Pure CSS

Edit any tab — preview updates live

.hs-anim {
  width: 100%;
  min-height: clamp(220px, 28vh, 100vh);
  padding: clamp(20px, 4vh, 80px) clamp(16px, 4vw, 40px);
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(124,108,255,0.14), transparent 70%),
    #0e0e16;
  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-anim-h {
  margin: 0; font-size: clamp(28px, 7vw, 88px);
  font-weight: 900; line-height: 1; letter-spacing: -0.03em;
  display: flex; gap: clamp(8px, 1.5vw, 18px); flex-wrap: wrap; justify-content: center;
}
.hs-anim-h span {
  display: inline-block;
  background: linear-gradient(135deg, #fff 0%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  opacity: 0; transform: translateY(20px);
  animation: hs-anim-up 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
  animation-delay: calc(var(--d) * 150ms);
}
.hs-anim-p, .hs-anim-cta {
  opacity: 0;
  animation: hs-anim-fade 0.6s ease forwards;
}
.hs-anim-p { margin: 0; font-size: clamp(11px, 1.6vw, 17px); color: #b8b6d4; animation-delay: 700ms; }
.hs-anim-cta {
  padding: 9px 20px; border-radius: 7px;
  background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff;
  font-size: clamp(11px, 1.5vw, 14px); font-weight: 700;
  text-decoration: none;
  animation-delay: 900ms;
  transition: filter 0.15s;
}
.hs-anim-cta:hover { filter: brightness(1.12); }
@keyframes hs-anim-up   { to { opacity: 1; transform: none; } }
@keyframes hs-anim-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hs-anim-h span, .hs-anim-p, .hs-anim-cta { animation: none; opacity: 1; transform: none; }
}

Live preview Ready