<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <!-- Footer starts here --> <footer class="footer row mt-5"> <div class="container mt-5"> <div class="row "> <div class="col-md-12 mt-5 text-center"> <h1>PURE CSS RGB FOOTER</h1> <h4>Enter you text here!!</h4> <h4>TEXT</h4> <p class="social-icons-header"> <a href="facebook.com"><i class="fa fa-facebook "></i></a> <a href="facebook.com"><i class="fa fa-twitter"></i></a> <a href="facebook.com"><i class="fa fa-instagram"></i></a> <a href="facebook.com"><i class="fa fa-linkedin"></i></a> </p> </div> <div class="col-md-12 text-center mt-5"> <h6 class="">Designed with <span style="color: red;">❤</span> by <a href="http://www.prat.ee/k">Prateek Gupta</a> </h6> </div> </div> </div> </footer>

.footer{ color: white; border-top: 8px solid crimson; background-color: #c91d61; background: linear-gradient(20deg,blue,crimson,purple); /*Change colors as you want*/ background-size: 1000% 1000% !important; -webkit-animation: changeColors 30s ease infinite; -moz-animation: changeColors 30s ease infinite; -o-animation: changeColors 30s ease infinite; animation: changeColors 30s ease infinite; } @-webkit-keyframes changeColors { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }