How to do box shadow with progress bar style using bootstrap? Last Updated : 31 Jul, 2019 Improve Improve Like Article Like Save Share Report Progress bars are used to show the progress of a process. Box shadow with progress bar style highlights the user progress of a task/process with box-shadow effect. Syntax: <td style="box-shadow: px px px px rgba()"></td> Return Value: It returns box shadow with progress bar style. Example 1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h1 style="text-align:center;color:green;"> GeeksforGeeks </h1> <table> <tr> <td style= "box-shadow: 4px 2px 2px 5px rgba(0, 255, 0, 0.3);"> <span style="font-size:15px; color:green"> GeeksforGeeks </span> </td> </tr> <tr> <td style= "box-shadow:23px 1px 16px rgba(0, 255, 0, 0.3);"> <span style="font-size:35px; color:green"> GeeksforGeeks </span> </td> </tr> </table> </div> </body> </html> Output: Example 2: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> <style> td { background: repeating-linear-gradient( 70deg, green 0 10px, lightgreen 10px 20px) 0 0/100% 100% no-repeat; } </style> </head> <body> <div class="container"> <h1 style="text-align:center;color:green;"> GeeksforGeeks </h1> <table> <tr> <td style=" box-shadow: 1px 2px 2px 5px rgba(0, 255, 0, 0.3); background-size:20% 100%;"> <span style="font-size:30px "> 20%</span> </td> </tr> <tr> <td style=" box-shadow: 4px 2px 2px 5px rgba(0, 255, 0, 0.3); background-size:80% 100%;"> <span style="font-size:50px; "> 80%</span> </td> </tr> </table> </div> </body> </html> Output: Browser Support: Browsers which support box shadow with progress bar style: Internet Explorer Google Chrome Opera Firefox Safari Like Article Suggest improvement Next How to create multi step progress bar using Bootstrap ? Share your thoughts in the comments Add Your Comment Please Login to comment...