<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 ----------> <div class="container"> <h1 class="prakash" data-text="[Prakash_Prajapati]">[Prakash_Prajapati]</h1> </div>

@import url('https://fonts.googleapis.com/css?family=Quicksand'); body { margin: 0; padding: 0; background: #262626; background-size: cover; font-family: 'Quicksand', sans-serif; } .prakash { position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); margin: 0; padding: 0 20px; font-size: 6em; color: #fff; text-shadow: 0 0 20px #ff005b; } .prakash:after { content: attr(data-text); position: absolute; top: 0; left: 0; padding: 0 20px; z-index: -1; color: #ff005b; filter: blur(15px); } .prakash:before { content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fe3a80; z-index: -2; opacity: 0.5; filter: blur(40px); }