My book API design for beginners is getting ready. Subscribe now to get your free copies when it get published.
BlogVideos
#react
#css
#javascript
#mongodb
#tech talks
#Logrocket Blog

Gradient text style using CSS

April 06, 2019🍿 1 min readEdit this post on Github
Follow me on twitter. I share quick tips, my reading list and also about free workshop and webinars around web and mobile development everyday.

Gradient backgrounds started the trend, nowadays websites have more gradient colors for many elements after gradient become widely supported on modern browsers.

One such aspect is, styling text with gradient color. Let see it in action

.gradient-text {
  // set the background color
  background: linear-gradient(to right, #ff8a00 0%, #da1b60 100%);
  // background color masked along the text and clip away the rest
  -webkit-background-clip: text;
  // make fill color to transparent so that masked background color will be shown
  -webkit-text-fill-color: transparent;
}

Browser compatibility

  • This is only supported in webkit based browsers. For other browsers, color property can be the fallback option to render color related to the gradient color.
  • -webkit-text-fill-color is a non standard CSS, so have fallback color property to support every browser without causing accessibility issues on non supported browsers.

Apart from IE, all major browser support this solution. Hope you learn a trick to show a text with gradient color on your site 😋

Subscribe for my e-book

Subscribe to get free copies of my book API design for beginners once it is published. You can see the progress of the book here.

Share:

Made with ❤️ in Tallinn, Estonia

Paramanantham Harrison's DEV Profile