Text Gradient

Apply gradient colors to text

Text

Live preview

Gradient Text

CSS

background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;

Browser support

Chrome 2+, Safari 4+, Firefox 49+. -webkit- prefix needed for older Safari.

Related tools

CSS Gradient Generator Box Shadow Generator CSS Property Explorer

Other CSS examples

Soft Box Shadow Elevated Box Shadow Neon Glow Shadow Blue to Purple Gradient Sunset Gradient Ocean Gradient Emerald Gradient Glassmorphism Neumorphism Smooth Scroll Truncate Text (Ellipsis)Center with Position Center with Flexbox Center with Grid