Gradient Text

.gradient-text { font-family: 'Segoe UI', sans-serif; font-size: 48px; font-weight: 900; letter-spacing: -1px; background: linear-gradient(135deg, #3fb950, #58a6ff, #bc8cff, #f778ba, #f0883e); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-flow 4s ease infinite; text-align: center; line-height: 1.2; } @keyframes gradient-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .gradient-sub { font-family: 'Segoe UI', sans-serif; font-size: 16px; color: #8b949e; text-align: center; margin-top: 12px; }

<div> <div class="gradient-text">CSS is Beautiful</div> <div class="gradient-sub">Animated gradient text effect using background-clip</div> </div>