CSS Modal with Blur Background

A modal dialog is one of the useful UI elements to display instant information to the users. Staying on the same webpage, it can be used to show notification, informative content, an image/video, or operational elements. Generally, a transparent overlay covers the background content when a modal displayed. But do you want to create a modal with blur background using CSS?

Well! in this tutorial, we’re going to create a modal popup with a blurred overlay over the main content. The requirement of this project is that when users click the button/link the modal opens and a blurred overlay covers the background. Modal has a title, content area, and a close button.

The coding concept is that we’ll create/style a modal using HTML and CSS. We’ll keep it behind the scene and show it when a specific class added to the modal. We’ll use the vanilla JavaScript function to toggle the class. Before starting with coding, check out the demo of this modal.

HTML Structure

First of all, create a div element with a class name "content" and place your page’s content inside it. This container will be blurred when the modal displayed. Also, create a button element that will be used to fire the modal popup.

  <div class='content'>
    <p>Your content goes here that will be blurred when modal displayed.</p>
    <button class='modal-toggle'>Open Modal</button>
  </div>

After that, you need to create HTML for modal popup just after the content container. To do so, create a div element with the class name “modal” and place a button element that will be used to close the popup. Similarly, create h2 element with a class name "modal-title" and place your content after it. At last, wrap all these elements into a wrapper and define its class name "modal-wrapper".

<div class='modal-wrapper'>
  <div class='modal'>
    <button class='modal-toggle modal-button'>×</button>
    <h2 class='modal-title'>Modal Title</h2>
    <div class='modal-content'>
      <p class='p'>Your Modal Content.</p>
  </div>
</div>

Inside the "modal-content" div tag, you can place any HTML element like image, videos, links, and buttons, etc.

CSS Styles for Modal with Blur Background

After creating the markup structure for modal, now it’s time to style it using CSS. But before this, you need some basic styles for your HTML document to get the modal working. So, define styles for the body, headings, and paragraphs as follows:

body {
  height: 100vh;
  padding: 30px;
  background: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);
}

h1 {
  font-family: 'Inknut Antiqua', serif;
  font-size: 2.5em;
  margin-bottom: .25em;
  color: #fff;
}

h2 {
  font-family: 'Lato', sans-serif;
  font-size: 1.2em;
  margin: 2em 0;
  letter-spacing: 1px;
  color: #fff;
}

p {
  font-family: 'Lato', sans-serif;
  font-size: 1em;
  line-height: 1.75em;
  margin-bottom: 20px;
  color: #fff;
}

Now, specify the CSS styles for the button element that will be used to open the modal. If you want to customize this button, check out this CSS buttons pack.

button {
  padding: 10px;
  border: none;
  border-radius: 20px;
  margin-bottom: 1.5em;
  background: #fff;
  cursor: pointer;
  min-width: 38px;
  font-size: 1em;
}

Similarly, specify the styles for your page content. Keep its blur filter 0 and opacity 1 along with the CSS transition property for smoothness.

.content {
  -webkit-filter: blur(0);
          filter: blur(0);
  opacity: 1;
  -webkit-transition: opacity 500ms ease, -webkit-filter 500ms ease;
  transition: opacity 500ms ease, -webkit-filter 500ms ease;
  transition: filter 500ms ease, opacity 500ms ease;
  transition: filter 500ms ease, opacity 500ms ease, -webkit-filter 500ms ease;
}

After that, define styles for content when the "modal--active" class added to the modal. Make its filter 8px and opacity 1.

.modal--active .content {
  -webkit-filter: blur(8px);
          filter: blur(8px);
  opacity: 1;
}

Likewise, create styles for the modal-wrapper class. Keep its position fixed and keep it behind the scene by defining 100vh value for the top property. Specify 0 value for the right, bottom, and left in order to fit it on the fullscreen. Define its opacity 1 and top value 0 for modal–active class.

.modal-wrapper {
  position: fixed;
  top: 100vh;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-filter: blur(15px);
          filter: blur(15px);
  opacity: .01;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  overflow: auto;
  -webkit-transition: opacity 300ms ease 200ms, -webkit-transform 300ms ease 200ms, -webkit-filter 300ms ease 200ms;
  transition: opacity 300ms ease 200ms, -webkit-transform 300ms ease 200ms, -webkit-filter 300ms ease 200ms;
  transition: transform 300ms ease 200ms, filter 300ms ease 200ms, opacity 300ms ease 200ms;
  transition: transform 300ms ease 200ms, filter 300ms ease 200ms, opacity 300ms ease 200ms, -webkit-transform 300ms ease 200ms, -webkit-filter 300ms ease 200ms;
}
.modal-wrapper.modal--active {
  top: 300px;
  margin-top: -150px;
  -webkit-filter: blur(0);
          filter: blur(0);
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

The “modal” class/element is the child item of the modal-wrapper. We need to align it to the center of the page. To do so, keep the relative position, overflow hidden, define the height, width, and keep the left and right margin auto. The values for box-shadow, padding, and border-radius can be defined according to your needs.

.modal {
  position: relative;
  background: #fff;
  padding: 80px 20px 20px;
  overflow: hidden;
  height: 300px;
  width: 600px;
  border-radius: 10px;
  box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.4);
  margin: 0 auto;
}

Specify the styles for the modal title as follows:

.modal-title {
  position: absolute;
  top: 15px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

You can define the styles for each element of the modal content by targeting child selectors. The following is an example of the paragraph style of the modal content. Similarly, you can set custom styles for other elements that you placed in the modal-content.

.modal-content p{
  color: #333;
}

Finally, specify the CSS styles for the close button. Keep its absolute position and set 20px value for both left and top property. You can customize the background and color values as you need.

.modal-button {
  background: #e20540;
  color: #fff;
  position: absolute;
  top: 20px;
  left: 20px;
}

JavaScript Function to Open/Close Modal

After creating and styling the modal, now its time to functionalize it using JavaScript. We just need a little function to toggle the “modal–active” class. So, the following is the JavaScript code to open/close the modal popup.

<script>
const contentWrapper = document.querySelector('.content-wrapper');
const modalWrapper = document.querySelector('.modal-wrapper');
const modalButtons = document.querySelectorAll('.modal-toggle');

modalButtons.forEach(button => {
  button.addEventListener('click', () => {
    contentWrapper.classList.toggle('modal--active');
    modalWrapper.classList.toggle('modal--active');
  });
});
</script>

You have done it! I hope you have successfully created a CSS modal with blur background. If you have any questions or suggestions, let me know by comment below.