CSS Live Preview Available

Liquid Metal Text

Hyper-realistic liquid metal text with flowing chrome effect

CSS3Liquid MetalChromeGradientText Effect

Code

.liquid-metal-text {
  font-size: 80px;
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(45deg, 
    #ffffff 0%, 
    #e0e0e0 10%, 
    #a0a0a0 20%, 
    #707070 30%, 
    #a0a0a0 40%, 
    #d0d0d0 50%, 
    #ffffff 60%, 
    #a0a0a0 70%, 
    #707070 80%, 
    #a0a0a0 90%, 
    #ffffff 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  animation: liquid-metal-flow 3s ease-in-out infinite;
  text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
@keyframes liquid-metal-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

HTML

<"attr-name"</span>>class</span>="tag"</span>>h1</span> "attr-name"</span>>class</span>="liquid-metal-text"</span>>METAL</"attr-name"</span>>class</span>="tag"</span>>h1</span>>

Live Preview