Add a dark wash to an element (eg a Hero, or darken an image) with CSS

css-darken-element.md

Add a dark wash to an element (eg a Hero, or darken an image) with CSS

(This example snippet is in SCSS/Sass. Note that children of the element with the darken class will be set to position: relative; z-index: 1 so that any child content sits above the dark wash)

(tested and working with Internet Explorer 11 (IE11) and above, Chrome & Firefox - should be widely supported)

Example usage

<div class="hero darken">
  <h2>My hero content</h2>
  <p>Woo &amp; Yay</p>
</div>

CSS (SCSS) Code

$darken-opacity: 0.3;

.darken {
  position: relative;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  &:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    background-color: rgba(0, 0, 0, $darken-opacity);
  }
  > * {
    position: relative;
    z-index: 1;
  }
}