<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 ----------> <div class="back-gradient justify-content-center text-center"> <p>Hello</p> </div>

.back-gradient { height: 100%; width: 100%; left:0; right: 0; top: 0; bottom: 0; position: absolute; background: linear-gradient(90deg, #e60073, #e60000, #ff9966, #ffff66, #1affd1, #6600ff, #cc00ff, #e60073); background-size: 1000% 600%; -webkit-animation: Gradient 15s ease infinite; -moz-animation: Gradient 15s ease infinite; animation: Gradient 15s ease infinite; } p{ height: 100%; font-size: 50px; color: white; margin-top: 5%; } @-webkit-keyframes Gradient { 0% { background-position: -1% 0; } 100% { background-position: 110% 0; } } @-moz-keyframes Gradient { 0% { background-position: -1% 0; } 100% { background-position: 110% 0; } } @keyframes Gradient { 0% { background-position: -1% 0; } 100% { background-position: 110% 0; } } @media only screen and (min-width: 1000px) and (max-width: 1300px) { .back-gradient { background-size: 1000% 400% !important; -webkit-animation: Gradient 15s ease infinite; -moz-animation: Gradient 15s ease infinite; animation: Gradient 15s ease infinite; } } @media only screen and (min-width: 768px) and (max-width: 1000px) { .back-gradient{ background-size: 800% 250% !important; -webkit-animation: Gradient 15s ease infinite; -moz-animation: Gradient 15s ease infinite; animation: Gradient 15s ease infinite; } @-webkit-keyframes Gradient { 0% { background-position: 0 0; } 100% { background-position: 115% 0; } } @-moz-keyframes Gradient { 0% { background-position: 0 0; } 100% { background-position: 115% 0; } } @keyframes Gradient { 0% { background-position: 0 0; } 100% { background-position: 115% 0; } } } @media only screen and (min-width: 320px) and (max-width: 768px) { .back-gradient{ background-size: 800% 200% !important; -webkit-animation: Gradient 12s ease infinite; -moz-animation: Gradient 12s ease infinite; animation: Gradient 12s ease infinite; } @-webkit-keyframes Gradient { 0% { background-position: 0 0; } 100% { background-position: 115% 0; } } @-moz-keyframes Gradient { 0% { background-position: 0 0; } 100% { background-position: 115% 0; } } @keyframes Gradient { 0% { background-position: 0 0; } 100% { background-position: 115% 0; } } }