CSSフィルター生成器

フィルター関数

連結する順序が重要

filter: brightness(0.5) saturate(2) はまず明るさを適用し、その後で彩度を適用します。2つのフィルターは合成されて作用します。

filter: saturate(2) brightness(0.5) はまず彩度を適用します。画像が暗くされる前に明るいため、色の彩度がより際立ちます。

視覚的な違いはわずかですが確かに存在します。フィルターチェーンが思いどおりに見えないときは、両方の順序を試してみてください。

よく使うレシピ

/* 色あせた写真風 */
filter: contrast(0.9) saturate(0.85) brightness(1.05);

/* ヴィンテージ / 色あせ */
filter: sepia(0.3) contrast(1.1) brightness(0.95);

/* デュオトーン近似 */
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.5);

/* ヒーロー画像を暗く */
filter: brightness(0.6);

/* 無効状態 */
filter: grayscale(1) opacity(0.6);

/* すりガラス風オーバーレイ */
filter: blur(12px) saturate(1.3);

すりガラス効果のための backdrop-filter

filter は要素自体に適用されます。backdrop-filter は半透明の要素の背後にあるものに適用され、iOS が広めたすりガラス効果を生み出します。

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(1.2);
}

対応状況: すべての最新ブラウザ。Firefox は 103 以降でフラグなしでようやく対応しました。

パフォーマンスに関する注意

• blur() は、すべてのピクセルをカーネルで畳み込む必要があるため、最もコストの高いフィルターです。4K のヒーロー画像に 30px のぼかしをかけると、フレーム落ちが目に見えて発生します。
• grayscale、sepia、brightness などはピクセル単位の色変換であり、軽量です。
• 最新ブラウザではフィルターは GPU で高速化されますが、blur() のアニメーションは低スペック端末では依然としてカクつきます。
• アニメーションさせる前に will-change: filter を指定するとよいでしょう。

filter: drop-shadow() と box-shadow の違い

• box-shadow は要素のボーダーボックスに従います（border-radius を尊重します）。
• filter: drop-shadow() は要素の不透明なピクセルに従うため、clip-path の形状、PNG の透過、SVG パスの輪郭をなぞります。

切り抜かれた画像や透過のある画像の影には drop-shadow を使い、標準的なカードやボックスには高速な box-shadow を使いましょう。