<!-- Pros: Quick & dirty
Cons: Not technically correct -->
<h1>Drop Shadow Version</h1>

<!-- Pros: Accurate colors & shapes
Cons: Requires content in CSS -->
<div class="background">
  <h2>Mix Blending Mode Version</h2>
</div>

<!-- Pros: Accurate colors & shapes; easy to hide from older browsers
Cons: Requires duplicate HTML content -->
<div class="mix-blending-mode-alt">
  <h2 data-content="Alt Mix Blending Mode Version">Alt Mix Blending Mode Version</h2>
</div>

<div class="mix-blending-mode-alt">
  <h2 data-content="Overprint techniques">Also works with cool</h2>
</div>

body {
  background-color: #5fb1bd;
  color: #ed5943;
  text-align: center;
}

h1 {
  font-size: 3em;
  text-transform: uppercase;
  text-shadow: 2px -2px 0 rgb(78, 51, 46), -2px 2px 0 #f4f2e4;
}

.background {
  background-color: #5fb1bd;
  h2 {
    font-size: 3em;
    text-transform: uppercase;
    color: #f4f2e4;
    position: relative;
    display: inline-block;
    &:after {
      content: 'Mix Blending Mode Version';
      color: #ed5943;
      mix-blend-mode: multiply;
      position: absolute;
      top: -2px;
      left: 2px;
      width: 100%;
      margin: auto;
    }
  }
}

.mix-blending-mode-alt {
  background: inherit;
  h2 {
    font-size: 3em;
    text-transform: uppercase;
    color: #f4f2e4;
    position: relative;
    display: inline-block;
  }
  @supports (mix-blend-mode: multiply) {
     h2:after {
      content: attr(data-content);
      color: #ed5943;
      mix-blend-mode: multiply;
      position: absolute;
      top: -2px;
      left: 2px;
      width: 100%;
      margin: auto;
    } 
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.