JSFiddle - React, Tailwind, and code Playground

CSS3 inset text-shadow trick

by Jennifer Perrin

HTML

<link href='http://fonts.googleapis.com/css?family=Sigmar+One' rel='stylesheet'>

<h1 class="cutout">Cutout Text Effect</h1>

CSS

body {
    background: #e6e6e6;
}
h1 {
    color: hsla(0,50%,50%,.5); /* Must be slightly transparent for effect to work */
    font: bold 72px/72px 'Sigmar One', sans-serif;
    margin-top: 50px;
    text-align: center;
}

/* Cutout Text Effect */

.cutout {
    text-shadow: 0 3px 7px #e6e6e6, 0 0 0 #000; /* The first color must match the background */
}

/* Remove shadows when selecting text */

::-moz-selection {
    background: hsla(0,0%,0%,.75);
    color: #fff;
    text-shadow: none;
}
::selection {
    background: hsla(0,0%,0%,.75);
    color: #fff;
    text-shadow: none;
}