CSS Masksを使って透過画像にCSS数行で好きな色を着色する

画像作成の手間を減らせそうなCSS小ネタを紹介。

『1枚の透過画像にcss1行で好きな色を着色する』 処理をしています。

テキストなら background-clip: text を利用して以下のように記述すれば済みますが、

background: rosybrown;
background-clip: text;
-webkit-background-clip: text;
color: transparent;

画像だとこの手法は使えません。

SVGへ直接fillを足した指定も出来ますが、SVGの中身を毎回書き換えるのもなあ……となりますし、透過PNGなら尚更面倒ですね。グラデーションとなると更にややこしいことになります。

着色方法

考え方としては先程のテキスト処理で紹介した background-clip が mask に置き換わっただけですね。

width: 166px; height: 82px;
background: rosybrown;
mask: url(mask.svg) no-repeat;
-webkit-mask: url(mask.svg) no-repeat;

グラデーションはbackground の値を以下のように変更するだけでよし。

background: linear-gradient(135deg, darkseagreen 0%, rosybrown 100%); 

2022年6月にサポート終了するIE11以外のブラウザなら問題なく利用できます。
CSS Masks | Can I use... Support tables for HTML5, CSS3, etc

余談

今回のサンプル用にcodepenを利用した際、
読み込む画像を別ドメインから流用したためCORSエラーを起こしていたのですが、
background-image: url(mask.svg) だと画像は表示されるのに
mask-image: url(mask.svg) だと画像が表示されませんでした。
※サンプルでは流用元のCORSエラーを解消済み。