gradient text effect

Easy for Newbie to Creating Gradient Text with CSS3

CSS3 allows effects on text and other elements. However, CSS3 is also to be supported by modern browsers that have CSS3 support 100%. Some of the effects that can be used in the text one of which was: gradient. This time we will present a tutorial how to create a gradient effect on a text.

This effect is suitable for a website headline or title of an article. The impression of this effect is more cheerful, not monotonous and relax. The combination of gradient colors will create a feeling softer.

<html>
<head>
<style type="text/css">
div#header{
  position: absolute;
top: 20px;
left: 128px;
width: 640px;
height: 45px;
font-family: "Times New Roman", Times, serif;
font-weight:700;
font-size: 35px;
display: block;
 background-image: -webkit-linear-gradient(#314A23, #828C68);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
position:relative; 
text-shadow: 3px 3px 5px #A7B485;
border:solid 1px color:#FFFFFF;
 }
}

</style>
</head>
<body>
<div id="header">Text will show in gradient effect</div>
</body>
</html>

That’s all it takes to create a text with a gradient effect. It’s easy right? ¬†Good luck

Web developer, big fan of CakePHP, loving wordpress soo much. You can found him on Google+ and Facebook. Dont forget to follow him on Twitter.
Posts created 562

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top