CSSAwwwards
+ Submit tool
effects

CSS Gradient Text Effect

Apply a smooth gradient fill to text using background-clip and transparent color.

Gradient text is a popular design trend for headings and highlights. The technique uses background-clip: text combined with color: transparent to let the background gradient show through the text shape. Works in all modern browsers.

Live CSS Editor
CSS
Preview
Edit CSS → see live previewTab = 2 spaces

Usage Note

Apply to heading elements like h1, h2, or span. Note: background-clip: text clips the background to the foreground text shape, so color must be transparent to reveal the gradient.

Tags
#gradient#text#background-clip#typography#visual
Share on XLinkedIn