CSSを用いて文字のクリッピングマスクを作成する方法を紹介します。クリッピングマスクとは、くり抜きたい画像（下のレイヤー）とくり抜かれる画像（上のレイヤー）を重ねて、透過されている部分を非表示にする（＝マスクする）ことを指します。
CSSで文字のクリッピングマスクを行う方法として、以下の２点を挙げました。
background-clip: text;を指定するmix-blend-modeでブレンドモードを変更する1.の方法は、IEがbackground-clipとtext-fill-colorに非対応なため、テキストにcolor: black;といった文字色を指定しておきましょう。例では、グラデーションのくり抜きと画像のくり抜きを実装しました。画像のくり抜きができているかわかりにくい場合は、codepenの右下の「Rerun」ボタンを何回か押してみてください。
2.の方法はappleの商品紹介ページで利用されていた方法で、CSSのブレンドモードを用いて文字の部分にだけ画像を表示させるやり方になります。こちらは背景色（例では<div class="gradient-wrapper">）によってmix-blend-modeで指定する値を変える必要があります。
今回は背景色を白としたのでmix-blend-mode: screen;としました。mix-blend-modeについてはmix-blend-mode - CSS: カスケーディングスタイルシート | MDNをご覧ください。
参考：
https://caniuse.com/?search=background-clip
https://caniuse.com/?search=text-fill-color
https://caniuse.com/?search=mix-blend-mode