<div class="container">
  <h1>Masking with SVG Text and Mask Elements: displays in Webkit, Firefox and IE</h1>

  <div class="text-demo-wrapper">
    <svg class="text-demo" viewBox="0 0 600 400" width="600" height="400">
    <defs>
      <mask id="myMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="125" y="200" id="myText" transform="rotate(5)">Text Mask</text>
        <text x="125" y="293" id="mySubtext">SVG</text>
      </mask>
    </defs>
    <ellipse class="masked" cx="300" cy="200" rx="300" ry="150" fill="rgba(173, 216, 230, 0.8)" />
  </svg>
  </div>
</div>
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
  color: white;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/backdropcssmask.jpg') center center / cover no-repeat;
}

.container {
  max-width: 90%;
  margin: 0 auto;
  text-align: center;
}

.text-demo-wrapper {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.text-demo {
  display: block;
  margin: 0 auto;
}

#myText {
  font-size: 100px;
  font-family: impact;
  stroke: #F59DD9;
  stroke-width: 5px;
  fill: #000;
  transform: rotate(5deg);
}

#mySubtext {
  font-size: 80px;
  font-family: Arial;
  stroke: #0DBF99;
  stroke-width: 4px;
  fill: #000;
  transform: rotate(-2deg);
}

.masked {
  mask: url("#myMask");
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.