<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 ----------> <blockquote> <h1 class="gradient-text">If you want to go quickly, go alone. If you want to go far, go together.</h1> <p><cite>– Probably Not Really An African Proverb</cite></p> </blockquote>

@import 'https://fonts.googleapis.com/css?family=Kaushan+Script'; .gradient-text { position: relative; text-shadow: .15em .15em .35em #888; padding: .5em; &::after { content:''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: radial-gradient(circle at 70% 3%, #aa048b, #bb9801); mix-blend-mode: screen; } } // boring body { font-size: 4vmax; text-align: center; background: #fff; color: #000; } blockquote { margin: 0; } h1 { font-family: 'Kaushan Script', sans-serif; letter-spacing: -.1ch; margin: 0; line-height: 1.3; } p { font-family: sans-serif; font-size: 1ch; opacity: .35; }