[CSS]background-clipで文字の形に背景を切り取る

Apple iPhone XRの商品ページにて

これめっちゃかっこよくないですか？
iPhone XR - Apple（日本）

実は簡単に出来ちゃいます

そう、CSSのbackground-clip属性ならね
background-clip - CSS: カスケーディングスタイルシート | MDN

使い方

See the Pen css background-clip by Akira Kanno (@teinen) on CodePen.

ブラウザサポート

Can I use...

Firefox, Chrome and Safari support the unofficial -webkit-background-clip: text (only with prefix)

MDNによると、background-clip: text;はIE11のみサポートしていないようです
IE11死すべし

まとめ

みんなもbackground-clipでオサレデザインを楽しもう！