How to grey out a box in CSS

Create another div that sits on top of #message-box with an opacity of say, 50% and a background-color of gray. When you need to, just show this overlay div. A demo is forthcoming.

Here's a nice demo to show you what I'm talking about. This approach also has the benefit (if, as I assume, you're attempting to 'disable' the message div) of prevent any clicks from reaching the div below it, which effectively disables the below div.

$(document).ready(function() {
  $("#myDiv").click(function() {
    $("#overlay").show();
  });
});
#myDiv {
  width: 100px;
  height: 100px;
  background-color: yellow;
  margin: 50px 50px;
  padding: 10px;
}

#overlay {
  display: none;
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: gray;
  top: 50px;
  left: 50px;
  padding: 10px;
  opacity: .8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
  <p>Some text</p>
  <input type="button" value="A button" />
</div>

<div id="overlay"></div>

May be you can write like this:

#message-box > * {
   background-color: grey;
}

Why not use opacity?

Say something like:

#message-box {opacity: 0.5;}

If you are trying to actually disable it (i.e. don't allow any click events on it), you can use pointer-events: none;. Browser support in 2016 is very good.

Update February 1st, 2017

This answer is still getting some attention so I decided to provide a better, visually more attractive example. (I suggest opening the example in full screen.)

In the example below I added my previous approach: use opacity to create a 'grayed out' look. However, by using the filter property you can actually gray it out. Support is good, if you don't need IE support. By using values such as grayscale and blur, and even by combining those with the opacity property, a visually appealing 'gray out' effect can be reached.

Note that I didn't add pointer-events: none in this example, but it could still be useful for your specific case!

const messageBox = $("#message-box");
  
$("button[data-gray-class]").click(function() {
  const $this = $(this);
  const classToAdd = $this.attr("data-gray-class");

  messageBox.removeClass();
  $this.siblings().removeClass("active");

  if (classToAdd != 'none') {
    messageBox.addClass(classToAdd);
    $this.addClass("active");
  }
});
* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  width: 100%;
  margin: 0;
}

body {
  background: #e55e51;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.48;
}

h1,
h2,
h3 {
  font-family: 'Comfortaa', cursive;
  font-weight: 700;
  margin-top: 0;
}

#message-box {
  width: 67%;
  padding: 0.87em;
  background: #fbdd44;
  color: #a39135;
  max-width: 720px;
  min-width: 320px;
  margin-top: auto;
}

#message-box h2 {color: #516214;}

img {
  float: right;
  height: auto;
  width: 33.33%;
}

aside {
  margin: 16px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

aside button {
  margin: 6px;
  font-size: 14px;
  background: transparent;
  border: 1px solid white;
  border-radius: 24px;
  padding: 4px 8px;
  color: white;
  cursor: pointer;
}

aside button:hover,
aside button:active,
aside button.active,
aside button[data-gray-class="none"] {
  background: white;
  color: #ff6f61;
}

aside button[data-gray-class="everything"] {
  border-width: 2px;
}

aside button[data-gray-class="none"]:hover {
  border-color: white;
  background: #ff6f61;
  color: white;
}

aside button:focus {
  outline: 0 none;
}


/* These classes determine the different appearances */

.opacity {
  opacity: 0.6;
}

.grayscale {
  filter: grayscale(100%);
}

.blur {
  filter: blur(3px);
}

.opacitygrayscale {
  opacity: 0.6;
  filter: grayscale(100%);
}

.opacityblur {
  opacity: 0.6;
  filter: blur(3px);
}

.grayscaleblur {
  filter: blur(3px) grayscale(100%);
}

.everything {
  filter: blur(3px) grayscale(100%);
  opacity: 0.6
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Comfortaa:700|Source+Sans+Pro" rel="stylesheet">
<div id="message-box">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="StackOverflow logo">
  <h2>I am a message box</h2>
  <p>Sent by <em>StackOverflow</em></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
    Mauris massa. Vestibulum lacinia arcu eget nulla.</p>

  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis.
    Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed,
    euismod in, nibh.</p>
</div>

<aside>
  <button data-gray-class="none">Reset</button>
  <button data-gray-class="opacity">Opacity</button>
  <button data-gray-class="grayscale">Grayscale</button>
  <button data-gray-class="blur">Blur</button>
  <button data-gray-class="opacitygrayscale">Opacity &amp; grayscale</button>
  <button data-gray-class="opacityblur">Opacity &amp; blur</button>
  <button data-gray-class="grayscaleblur">Grayscale &amp; blur</button>
  <button data-gray-class="everything">Opacity, grayscale &amp; blur</button>
</aside>

Update February 7th, 2018

Because of continuing attention, I visually updated the snippet above and added some options. Enjoy.

Tags:

Css

Recent Posts