Animated Gradient Text Effect for Bold Text

Community Contribution: Jaee Chew

Preview Link

CSS

.gradient-bold2 strong,
.gradient-bold2 b {
    font-weight: bold;
    background: linear-gradient(90deg, #E130DB, #0071E3, #FF6054);
    background-size: 200% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 4s linear infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

HTML

<div class="gradient-bold">
  This is a <strong>color-shifting bold word</strong> in a sentence.
</div>