1

Pure CSS Text Gradients

To accomplish a pure CSS text gradient we will need to introduce you to -webkit-mask-image. Becuase this method for creating text gradients isn't an actual CSS property so we will we will be using several other CSS properties to accomplish it. There are several reasons to use this method instead of images, but most important reason is because it's cool. Actually we would not suggest this method simply because of compatibility reasons, but if you do decide to use it you will be happy to know that it degrades gracefully in all browsers. The following is an example of the text gradient technique:



Text Gradient

The HTML

The HTML markup is very straight forward. You will note the span tag inside the H1 tag. This will be explained later when we cover the markup of the styles. 
  1. [h1][span]Text Gradient[/span][/h1]

The styles

The Styles are a bit trickier, but most of the  markup will be familiar
  1. h1 span {
  2. color: #666;
  3. -webkit-mask-image: -webkit-gradient
    4. (linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(80%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
  4. }

You will notice the use of -webkit-mask-image. -webkit-mask accepts a variety of inputs, including images. In this case we will be tricking the selector to use the -webkit-gradient value as a mask. Because we cannot use the CSS gradients property on the text directly we have to get crafty and use the RGBa properties. By using the RGBa property we are able to make part of the top text layer transparent. The next step will be to the second color. 

  
h1:after{  
 content : 'Text Gradient';  
 color: #fff; 
}

To get our second color and we use the CSS pseudo-selector ":after" and the CSS "content" property to place the second colored version of text gradient in the markup. The second color in this case is white and now we can stack our two colors to create the gradient text effect. It should be noted that in this case we could have chosen not to use the pseudo-selector because our page background is white.

More Interesting CSS Text Effects

Want to Know anything more about text gradients?

Leave a comment and and get an answer. If we don't answer it we're sure someone can. As a Western web design company in Shenzhen, China, we understand how important it is to have a strong development community behind you and we believe it is just as important to contribute to that community. So please leave a comment or send us an email if you have any questions.

Let's get started!

Let's get into contact so you learn more about us and we can create solutions for you!