"Drop Shadow be a gradient"
Bootstrap 4.0.0 Snippet by prakash27dec

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="shadow">Prakash</div>
body { margin:0; padding:0; background:#000; } .shadow { position:relative; margin:100px auto 0; color:#fff; text-align:center; line-height:250px; font-size:50px; font-weight:bold; width:400px; height:250px; background:linear-gradient(0deg,#000,#262626); } .shadow:before, .shadow:after { content:''; position:absolute; top:-2px; left:-2px; background:linear-gradient(45deg,#fb0094,#0000ff,#00ff00,#ffff00,#ff0000,#fb0094,#0000ff ,#00ff00,#ffff00,#ff0000); background-size:400%; width:calc(100% + 4px); height:calc(100% + 4px); z-index:-1; animation:animate 20s linear infinite; } .shadow:after { filter:blur(20px); } @keyframes animate { 0% { background-position:0 0; } 50% { background-position:300% 0; } 100% { background-position:0 0; } }

Related: See More


Questions / Comments: