<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 id="wrap" class="text-center"> <!-- Button trigger modal --> <br> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Modal with blur effect </button> </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="container"> <div class="row"> <div class="col-sm-6 col-sm-offset-3 text-center"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button> <br><br> <h1>Modal with blur effect</h1> <h2>Put here whatever you want here</h2> <h4>For instance, a login form or an article content</h4> <h4><kbd>esc</kbd> or click anyway to close</h4> <hr> <div class="alert alert-danger"><h4>You can add any html and css ;)</h4></div> </div> </div> </div> </div>

body.modal-open #wrap{ -webkit-filter: blur(7px); -moz-filter: blur(15px); -o-filter: blur(15px); -ms-filter: blur(15px); filter: blur(15px); } .modal-backdrop {background: #f7f7f7;} .close { font-size: 50px; display:block; }