headinganimatedcsstext-effectgradientinteractive

Animated Shimmer Headline Text Effect

Анимированный заголовок H1 с эффектом градиентного мерцания CSS. Привлекает внимание к ключевым заголовкам на лендингах и сайтах.

Live Preview

Prompt

<!-- Füge das in deinen <head> oder vor dem </body> ein -->
<style>
  @keyframes shimmer {
    0%, 100% { background-position: 200% 0; }
    50% { background-position: 0% 0; }
  }
  
  .headline-shimmer {
    background: linear-gradient(90deg, #F1F5F9 0%, #F1F5F9 40%, #14B8A6 50%, #F1F5F9 60%, #F1F5F9 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s ease-in-out infinite;
  }
</style>

<!-- Deine Headline -->
<h1 class="lg:text-[76px] text-5xl font-bold leading-[1.05] tracking-tight font-custom mb-6 headline-shimmer">
  Stop Guessing.<br>
  Start Knowing.
</h1>

All Prompts