AI CSS Animations

Pearlescent Text Effect

Satin letters tinted pink, lilac and aqua, with a soft round sheen gliding over them like light on a pearl. The pastel stops are mixed with your accent so they hold up on white.

Also known as: pearl text css, opal text effect, mother of pearl gradient.

Pearlescent

HTML

<div class="txt-pearlescent-text">Pearlescent</div>

CSS

.txt-pearlescent-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
  background:
    radial-gradient(ellipse 30% 70% at 50% 35%, rgb(255 255 255 / 0.85), transparent 75%) 0 0 / 200% 100% no-repeat,
    linear-gradient(100deg, color-mix(in srgb, var(--c) 40%, #f0abfc), color-mix(in srgb, var(--c) 40%, #a5b4fc) 25%, color-mix(in srgb, var(--c) 40%, #67e8f9) 45%, color-mix(in srgb, var(--c) 40%, #f9a8d4) 70%, color-mix(in srgb, var(--c) 40%, #f0abfc)) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: max(1px, 0.01em) color-mix(in srgb, color-mix(in srgb, var(--c) 50%, #581c87) 40%, transparent);
  filter: drop-shadow(0 0.03em 0.02em color-mix(in srgb, var(--c) 40%, rgb(46 16 101 / 0.4)));
  animation: txt-pearlescent-text-glide 4s ease-in-out infinite alternate;}
@keyframes txt-pearlescent-text-glide {
  from { background-position: 100% 0, 0% 0; }
  to   { background-position: 0% 0, 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .txt-pearlescent-text, .txt-pearlescent-text *, .txt-pearlescent-text::before, .txt-pearlescent-text::after, .txt-pearlescent-text *::before, .txt-pearlescent-text *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --txt-color on the element or a parent. Currently previewing #3b82f6.
  • Font size: set --txt-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 40px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar text animations