Add gradient background to your text with CSS

Gradient text color with CSSAdding gradient color to a text is typically achieved with a little Photoshop magic, however you can also create the same effect with CSS and a image with a gradient transparent background.

In this post you’ll learn 2 techniques on how to make a nice gradient background to your text with CSS, a general solution, and a very simple to implement solution, only for webkit based browsers.

Why use CSS for gradient text

Creating gradient effects with a graphical program like Photoshop, can result in very nice text effects, however there are also strong arguments why you should consider to create the effect with CSS:

  • Smaller page size in KB since the CSS effect to a image is much smaller than a image that has the effect embedded
  • SEO benefit, since the text is kept as text, and not as a image
  • Easy to maintain. You can automatically apply the effect to large volumes of text, without any manual work

Gradient text with CSS

The first technique combines CSS and a image with a transparent gradient background to create the gradient effect.

The images needs a gradient that runs from 100% transparent to the background color of the page. This also means that this gradient text effect can only be used on pages/sections, that has a solid background color.

.gtext h1 {
 font: bold 330%/100%;
 font-size: 48px;
 position: relative;
 margin: 30px 0 50px;
 color: #464646;
}
.gtext h1 span {
 background: url(img/text-gradient.png) repeat-x;
 position: absolute;
 display: block;
 width: 100%;
 height: 31px;
}

To apply the CSS to some text, just insert a empty <span></span> within  <h1></h1> tags

<div>
 <h1><span></span>CSS Gradient Text with image</h1>
</div>

Gradient text with CSS

Gradient text with Webkit

If your site is having many users using webkit based browsers like Google Chrome or Safari, webkit actually supports a even easier way of adding gradient background to a text.

In webkit you can specify that the background of a element should be gradient, and what colors the gradient should start and end with.

gh1 {
  font-size: 72px;
  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Gradient text background for webkit based browsers

See examples here

Conclusion

There are many benefits of using CSS for text effects like gradient background. It’s easier to maintain your content, and the size of your pages can get smaller.

It your users are using webkit based browsers, you can very easy add a gradient background with using any images…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

Comments are closed.