Gradient Text

Apply a gradient to text by setting background-clip: text and making the color transparent.

Example

.gradient-text {
  background: linear-gradient(90deg, #f9a825, #e53935);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900; font-size: 3rem;
}

CSS

Full Editor

Pro Tip

Always provide a fallback color for browsers that do not support background-clip: text.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned