Rose Gold Shimmer Text: CSS Text Animation

Rose Gold Shimmer Text

Soft rose gold script with a warm sheen sweeping through it and three tiny star glints twinkling at the letter tips. A banded pink metal gradient clipped to the type plus clip-path stars.

Also known as: rose gold text css, rose gold text effect, pink gold shimmer text, metallic pink text.

Champagne

Color Font size 40px Dark background

HTML

<div class="txt-rose-gold-shimmer-text">
  <span class="txt-rose-gold-shimmer-text-word">Champagne</span>
  <span class="txt-rose-gold-shimmer-text-stars" aria-hidden="true"><i style="--x: 4%; --y: 2%; --d: 0s; --s: 0.42em"></i><i style="--x: 50%; --y: -4%; --d: 1.1s; --s: 0.3em"></i><i style="--x: 92%; --y: 14%; --d: 2.2s; --s: 0.38em"></i></span>
</div>

CSS

.txt-rose-gold-shimmer-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 1.7);
  font-family: system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  font-family: "Didot", "Bodoni 72", "Playfair Display", Georgia, "Times New Roman", serif;
  font-style: italic;
  letter-spacing: 0.01em;}
.txt-rose-gold-shimmer-text-word {
  display: block;
  padding: 0 0.08em;
  background:
    linear-gradient(110deg, transparent 38%, rgb(255 244 240 / 0.95) 50%, transparent 62%) 0 0 / 280% 100% no-repeat,
    linear-gradient(180deg, #fbe0d4 0%, #e3a592 28%, #a85a68 50%, #efbfac 70%, #b9705f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.025em 0 #8a4552);
  animation: txt-rose-gold-shimmer-text-sheen 4.4s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.txt-rose-gold-shimmer-text-stars {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 0.05em rgb(232 140 130 / 0.9));
}
.txt-rose-gold-shimmer-text-stars i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  background: radial-gradient(circle, #fff 22%, #f3b3a3 70%);
  clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
  transform: scale(0);
  animation: txt-rose-gold-shimmer-text-twinkle 3.3s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d) infinite;
}
@keyframes txt-rose-gold-shimmer-text-sheen {
  0%        { background-position: 140% 0, 0 0; }
  60%, 100% { background-position: -40% 0, 0 0; }
}
@keyframes txt-rose-gold-shimmer-text-twinkle {
  0%, 100% { transform: scale(0) rotate(0deg); }
  14%      { transform: scale(1) rotate(45deg); }
  30%      { transform: scale(0) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .txt-rose-gold-shimmer-text-word, .txt-rose-gold-shimmer-text-stars i { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .txt-rose-gold-shimmer-text, .txt-rose-gold-shimmer-text *, .txt-rose-gold-shimmer-text::before, .txt-rose-gold-shimmer-text::after, .txt-rose-gold-shimmer-text *::before, .txt-rose-gold-shimmer-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.

Rose Gold Shimmer Text

HTML

CSS

Customizing this snippet

Similar text animations