Back to Components

Text Liquify

Text that appears to melt and flow like liquid. Letters distort and wave creating a mesmerizing fluid effect.

Morphing Text Creative

Live Preview

LIQUID

HTML

<div class="text-liquify">LIQUID</div>

CSS

.text-liquify {
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: liquify 3s ease-in-out infinite;
    filter: blur(0px);
}

@keyframes liquify {
    0%, 100% {
        transform: scaleY(1) scaleX(1);
        filter: blur(0px);
    }
    50% {
        transform: scaleY(1.3) scaleX(0.8);
        filter: blur(2px);
    }
}