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