<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h1 class="method1">CSS3 Text Gradient</h1> </div> </div>

body { font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif; background: #FDFDFD; } h1 { font-size: 60px; text-align: center; margin: 40px; color: #000; } h1.method1 { background: -webkit-gradient(linear, 100% 0, 0 0, from(red), to(yellow)); background: -webkit-linear-gradient(right, red, yellow); background: -moz-linear-gradient(right, red, yellow); background: -o-linear-gradient(right, red, yellow); background: linear-gradient(right, red, yellow); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }