CSS Live Preview Available

Gradient Text Effect

Vibrant gradient text with background clip and text fill

CSS3GradientTextBackground-clip

Code

.text-gradient {
  font-size: 48px;
  font-weight: 800;
  background: linear-gradient(90deg, #ff8a00, #e52e71);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

HTML

<"attr-name"</span>>class</span>="tag"</span>>h2</span> "attr-name"</span>>class</span>="text-gradient"</span>>Gradient Text</"attr-name"</span>>class</span>="tag"</span>>h2</span>>

Live Preview