How to Create an Overlay Using CSS

There are many techniques for creating overlays. In this snippet, we’ll show how to create an overlay using CSS properties.

One of the ways of creating an overlay is by absolutely positioning an HTML element on the page. We create <div> element in the markup then position it absolutely with the position property. After it, we give the <div> high z-index value to make it on top of all other elements on the page with the z-index property. We give higher z-index to the next <div>, which is opened on the top of our overlay.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

Create two <div> elements with the classes "overlay" and "modal".
Create another <div> element and write some text in it.

<h2>Creating an Overlay with an Absolutely Positioned Element</h2>
<div class="overlay"></div>
<div class="modal">Lorem Ipsum is simply dummy text </div>
<div>Lorem Ipsum is simply dummy text…</div>

Add CSS

Style the "overlay" class by setting the position property to "absolute" and the z-index to "10". Specify the width, height, top and left properties.
Style the "modal" class by setting the position to "fixed" and z-index to "11" (1px higher than the overlay layer). Specify the margin-top and margin-left, border-radius, line-height, and other properties.
Style the <body> by setting the font, color, min-height properties.
Set the position to "relative" for the overlay to extend when you scroll.

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.modal {
  width: 300px;
  height: 200px;
  line-height: 200px;
  position: fixed;
  top: 40%;
  left: 50%;
  margin-top: -100px;
  margin-left: -150px;
  background-color: #8ebf42;
  border-radius: 40px;
  text-align: center;
  z-index: 11;
}

body {
  position: relative;
  padding: 20px;
  margin: 0;
  min-height: 100%;
  font-family: 'Open Sans', sans-serif;
  background: #8ebf42;
  color: #eeeeee;
}

So, we’ve created an overlay. Let’s see the outcome!

Example of creating an overlay:

<!DOCTYPE html>
<html>
  <head>
    <title>overlay div</title>
    <style>
      body {
        position: relative;
        padding: 20px;
        margin: 0;
        min-height: 100%;
        font-family: 'Open Sans', sans-serif;
        background: #8ebf42;
        color: #eeeeee;
      }
      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.6);
      }
      .modal {
        width: 300px;
        height: 200px;
        line-height: 200px;
        position: fixed;
        top: 40%;
        left: 50%;
        margin-top: -100px;
        margin-left: -150px;
        background-color: #8ebf42;
        border-radius: 40px;
        text-align: center;
        z-index: 11;
      }
    </style>
  </head>
  <body>
    <h2>Creating an Overlay with an Absolutely Positioned Element</h2>
    <div class="overlay"></div>
    <div class="modal">Lorem Ipsum is simply dummy text </div>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

We can also create an overlay using the ::before and ::after selectors.

We can have the same styles and considerations used in the previous example by styling the ::before and ::after pseudo-classes on the body.

Example of creating an overlay with the ::before and ::after pseudo-elements:

<!DOCTYPE html>
<html>
  <head>
    <title>overlay div</title>
    <style>
      body {
        position: relative;
        padding: 20px;
        margin: 0;
        min-height: 100%;
        font-family: 'Open Sans', sans-serif;
        background: #8ebf42;
        color: #eeeeee;
      }
      body:after {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.3);
      }
      .modal {
        width: 300px;
        height: 200px;
        line-height: 200px;
        position: fixed;
        top: 40%;
        left: 50%;
        margin-top: -100px;
        margin-left: -150px;
        background-color: #8ebf42;
        border-radius: 40px;
        text-align: center;
        z-index: 11;
      }
    </style>
  </head>
  <body>
    <h2>Creating an Overlay with an Absolutely Positioned Element</h2>
    <div class="modal">Lorem Ipsum is simply dummy text </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>