ぼかし・明るさ・コントラスト・彩度などのfilterをスライダーで調整し、CSSを生成します。画像加工ソフトを使わずに見た目を変えられます。
使える主なフィルター
複数の関数はスペース区切りで並べます。順番によって結果が変わるため、意図した見た目にならない場合は順序を入れ替えてみてください。
| 関数 | 効果 |
|---|---|
| blur(px) | ぼかし |
| brightness(%) | 明るさ（100%が元の状態） |
| contrast(%) | コントラスト |
| saturate(%) | 彩度（0%で白黒） |
| grayscale(%) | 白黒化 |
| sepia(%) | セピア調 |
| hue-rotate(deg) | 色相の回転 |
| drop-shadow() | 形に沿った影 |
よく使う組み合わせ
/* 背景画像を暗くして文字を読みやすく */
filter: brightness(0.6) saturate(0.9);
/* ホバーで色を戻すグレースケール */
filter: grayscale(100%);
transition: filter .3s;
/* :hover { filter: grayscale(0); } */注意点
- blurは描画負荷が高く、大きな要素やスクロール中の適用は動作が重くなります
- filterを指定した要素は、子要素の position: fixed の基準になります（意図しない挙動の原因になります）
- drop-shadow は透過PNGの形に沿った影を作れます。box-shadowは矩形の影です
よくある質問
Q 複数のフィルターを重ねられますか？
できます。スペース区切りで並べると、書いた順に適用されます。
Q backdrop-filterとの違いは？
filterは要素自身に、backdrop-filterは要素の背後にあるものに効果をかけます。すりガラス表現には後者を使います。
Q 画像ファイル自体は変わりますか？
変わりません。表示上の効果のみで、元の画像データはそのままです。
Q パフォーマンスへの影響は？
特にblurは負荷が高くなります。広い範囲やアニメーションでの使用は控えめにしてください。