PUBLICROOTS Inc.

CSSのみで画像を白黒にする

2026-6-29

黒くする場合

.is-black {
 filter: brightness(0) invert(1);
}

白くする場合

.is-white {
 filter: brightness(1) invert(0);
}

brightness()関数は画像の明るさを制御する関数で、
brightness(0)で真っ黒にして、invertで反転すれば真っ白になります。