mr-wildcard mr-wildcard - 10 months ago 61
CSS Question

CSS knockout text effect + text-shadow on a background image

How would you achieve such effect in pure CSS ?

enter image description here

I easily found ressources to create a knockout text effect, but the challenge here is to combine classic knockout text effect like this with inner text shadow AND transparency to let the background image visible.

Experimental rules allowed. SVG too, but I'd prefer CSS :)

Answer Source

Starting from Hunter Turner answer, it's possible to improve it with CSS Blend Mode. This way the background image of the container can be blended to the text, resulting in what you wanted to do. However, remember it hasn't broad support yet.

html, body {
  margin: 0;
  padding: 0;

.container {
  width: 400px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('');
  background-size: contain;

.container p {
  font-weight: bold;
  font-size: 60px;
  font-family: Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, .45);
  text-shadow: 4px 4px 6px #fff, 0 0 0 #000, 4px 4px 6px #fff;
  mix-blend-mode: multiply;
<div class="container">
  <p>Hello World</p>