Gradient Text

Text filled with a gradient using background-clip:text.

Published May 19, 2026

Demo

Gradient Text Multi Color Animated Flow

HTML
				
				<span class="grad">Gradient Text</span>
<span class="grad-animated">Animated</span>

CSS
				
				.grad {
  background: linear-gradient(135deg, #5b4cdb, #e040fb);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

.grad-animated {
  background: linear-gradient(270deg, #5b4cdb, #e040fb, #22d3ee, #5b4cdb);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  animation: gradient-shift 4s linear infinite;
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

			

How it works

The gradient is applied to the background property, then background-clip:text clips it to the shape of the text. Setting color:transparent (or -webkit-text-fill-color:transparent) makes the text itself invisible, revealing the gradient behind it. Animating background-position creates the flowing color effect.