<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1 class="text-gradient">HOW MUCH DO YOU RATE MOVIE?</h1>

*, ::after, ::before { box-sizing: border-box; } body { background-color: black; display: flex; justify-content: center; align-items: center; height: 100vh; } h1 { margin: 0; padding: 0; } .text-gradient { font-family: sans-serif; font-weight: 800; text-transform: uppercase; display: inline-block; font-size: 88px; background: repeating-linear-gradient(135deg, #1dd577 0%, #00bbdc 50%, #1dd577 100%); background-size: 200% auto; background-position: 0 100%; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: slidingGradient 2s infinite; animation-fill-mode: forwards; animation-timing-function: linear; } @keyframes slidingGradient { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } }