テキストのグラデーション

以前のグラデーション

あいうえおかきくけこさしすせそ

これはこれでいいんですが、１つ１つの文字色を指定するというのはかなり大変な作業になります。

ところが現在では、CSSでテキストをくりぬくような形でマスクを使用することができ、背景をテキストでマスキングすることが可能なんです！
なので、背景にグラデーションをおけば、テキストのグラデーションを作ることが可能になります！

CSSで背景グラデーションをマスク

CSS class="gradient" 適用

あいうえおかきくけこさしすせそ

上記のHTMLコード

とまあ、このように昔のテキストグラデーションよりも、比較的簡単に、しかも美しくグラデーションされているのがわかるかと思います。

まだどのブラウザも最終対応ではないので、-webkit-指定しないと動かないことが多いようです。
（※現在（2021/5/12）、FireFoxのみが「background-clip:text」に対応しているようです。）

マスクということは、画像背景も切り抜くことができる？

というわけで、やってみましょう！

CSS class="picture" 適用

あいうえおかきくけこさしすせそ

というわけで、画像をテキストで切り抜くことも出来ました！！
▼切り抜かれた画像

そのほかにも、こんな可愛いことができますよ♪

CSS class="dot-text" 適用

あいうえおかきくけこさしすせそ

radial-gradient で、背景をドット描画にして、テキストでマスクした形です。
こんな風に、あらゆる背景描画をテキストで切り抜くことが可能になっております。

background-clip の他の値

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
では、下の例のように背景が適用されます。
これはこれでまた色々と使えそうですよね♪