text wave

sachin007
Jan 25, 2026 3
Live Preview

Live Editor

<h1 class="text-wave">Awesome</h1>
        .text-wave {
            font-size: 50px;
            font-weight: 900;
            color: transparent;
            background: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00, #00ffff);
            background-size: 200%;
            -webkit-background-clip: text;
            background-clip: text;
            text-transform: uppercase;
            letter-spacing: 3px;
            animation: gradient-shift 3s ease infinite;
        }

        .text-wave span {
            display: inline-block;
            animation: wave 1.5s ease-in-out infinite;
        }

        .text-wave span:nth-child(1) { animation-delay: 0s; }
        .text-wave span:nth-child(2) { animation-delay: 0.1s; }
        .text-wave span:nth-child(3) { animation-delay: 0.2s; }
        .text-wave span:nth-child(4) { animation-delay: 0.3s; }
        .text-wave span:nth-child(5) { animation-delay: 0.4s; }
        .text-wave span:nth-child(6) { animation-delay: 0.5s; }
        .text-wave span:nth-child(7) { animation-delay: 0.6s; }
        .text-wave span:nth-child(8) { animation-delay: 0.7s; }

        @keyframes wave {
            0%, 100% {
                transform: translateY(0) rotateX(0deg);
            }
            50% {
                transform: translateY(-30px) rotateX(180deg);
            }
        }

        @keyframes gradient-shift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
Categories

text wave

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
