20 CSS Gradient Text Designs 12 / 20

CSS Liquid Mercury Metallic Gradient Text

A cool blue-grey metallic gradient with rippling background-position animation and teardrop orbs below the headline evoke the look of flowing liquid mercury.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="gt-12">
  <span class="gt-12__label">liquid mercury gradient</span>
  <div class="gt-12__mercury">MERCURY</div>
  <div class="gt-12__drops">
    <div class="gt-12__drop"></div>
    <div class="gt-12__drop"></div>
    <div class="gt-12__drop"></div>
    <div class="gt-12__drop"></div>
  </div>
  <p class="gt-12__sub">reflective metallic shimmer</p>
</div>
.gt-12, .gt-12 *, .gt-12 *::before, .gt-12 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-12 {
  --bg: #080808;
  --m1: #c8d8e8;
  --m2: #e8eff8;
  --m3: #8090a0;
  --m4: #404858;
  font-family: 'Bebas Neue', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
}
.gt-12__label {
  font-family: 'Space Mono', monospace;
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #2a3040;
}
.gt-12__mercury {
  font-size: clamp(4rem, 15vw, 10rem);
  line-height: 1;
  letter-spacing: .1em;
  background: linear-gradient(180deg,
    var(--m2) 0%,
    var(--m1) 20%,
    var(--m3) 35%,
    var(--m2) 50%,
    var(--m4) 65%,
    var(--m1) 80%,
    var(--m3) 100%
  );
  background-size: 100% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-12-liquid 4s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(200,216,232,.15));
}
.gt-12__drops {
  display: flex;
  gap: .8rem;
  align-items: center;
}
.gt-12__drop {
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, var(--m2), var(--m3));
  animation: gt-12-drip 2.5s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(200,216,232,.2));
}
.gt-12__drop:nth-child(1) { width: 14px; height: 18px; animation-delay: 0s; }
.gt-12__drop:nth-child(2) { width: 22px; height: 28px; animation-delay: -.5s; }
.gt-12__drop:nth-child(3) { width: 18px; height: 22px; animation-delay: -1s; }
.gt-12__drop:nth-child(4) { width: 14px; height: 18px; animation-delay: -1.5s; }
.gt-12__sub {
  font-family: 'Space Mono', monospace;
  font-size: clamp(.7rem, 2vw, .9rem);
  letter-spacing: .2em;
  background: linear-gradient(90deg, var(--m3), var(--m2), var(--m3));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-12-flow 5s linear infinite;
}
@keyframes gt-12-liquid {
  0%, 100% { background-position: center 0%; }
  50%       { background-position: center 100%; }
}
@keyframes gt-12-drip {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50%       { transform: scaleY(1.2) translateY(4px); }
}
@keyframes gt-12-flow {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-12__mercury, .gt-12__drop, .gt-12__sub { animation: none; }
}

How this works

Mercury's distinctive look comes from its high reflectivity and cool blue-grey tone with sharp bright highlights. The gradient uses seven stops alternating between #e8eff8 (near white), #c8d8e8 (pale blue-grey), #8090a0 (mid grey-blue), and #404858 (dark steel), mirroring the multi-highlight pattern of chrome but in the blue spectrum. background-size: 100% 300% and a sinusoidal background-position animation make the highlights ripple as if the metal surface is in motion.

The teardrop orbs below use border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% — an asymmetric ellipse that creates the classic mercury drop silhouette — with a scaleY animation to simulate surface tension deformation.

Customize

  • Warm the mercury to a silvery gold by mixing in #c8b890 tones in place of the cool blue-grey stops.
  • Add filter: brightness(1.1) contrast(1.1) to .gt-12__mercury for a more specular highlight on OLED or high-brightness displays.
  • Increase drop deformation by pushing scaleY(1.4) in the keyframe and lowering the border-radius bottom values to 30% for a more elongated drip.

Watch out for

  • The asymmetric border-radius teardrop shape requires the four-slash notation — border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% — which is not well-supported in IE.
  • Animating background-position vertically on a background-size: 100% 300% canvas means the element must not have its height change during the animation; dynamic content should use a fixed min-height.

Browser support

ChromeSafariFirefoxEdge
57+ 10.1+ 49+ 57+

Asymmetric border-radius on the drop orbs uses the slash notation supported in all modern browsers since 2013.

More from 20 CSS Gradient Text Designs

CSS Aurora Borealis Gradient Text SweepCSS Conic Gradient Text Hue SpinCSS Rainbow Wave Per-Letter Gradient TextCSS Lava Lamp Radial Gradient TextCSS Neon Pulse Gradient Text GlowCSS Gradient Text Outline Stroke EffectCSS Metallic Chrome Gold Copper Gradient TextCSS Holographic Foil Iridescent Gradient TextCSS Duotone Gradient Text Two-Colour FillCSS Gradient Text Texture Fill — Sunset Starfield OceanCSS Hover Reveal Gradient Text EffectCSS Toggle Switch Gradient Text Colour Picker
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →