CSS フィルタージェネレーター

関数の並び順

出力は .element クラスに filter プロパティを設定します。.element を自分のセレクターに置き換えれば、画像・div・canvas・video・疑似要素などに使えます。関数はいつもスライダーの順（blur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate、sepia）で書き出され、プレビューも同じ文字列を使います。ブラウザーは書かれた順に1つずつ適用し、前の関数の結果が次の関数の入力になります（Filter Effects Level 1 §5）。順序を変えたいときは、コピーした後に手で並べ替えてください。

例：地理院タイルの地図を暗い配色で表示する

国土地理院の地理院タイル（標準地図など）をダークモードのページに置くとき、地図画像だけを反転させる方法があります。「反転」を 100、「色相回転」を 180、「明るさ」を 90 にすると、ツールは次のように書き出します。

.element {
  filter: brightness(90%) hue-rotate(180deg) invert(100%);
}

スライダーを動かした順に関係なく brightness が先頭に来るので、明るさを下げてから反転することになります。仕様の定義（brightness は各チャンネルへの掛け算、invert は 1 から引く値、hue-rotate は灰色を変えない）どおりに計算すると、白（1）は 0.9 にしてから反転して 0.1 になり、真っ黒ではなく暗い灰色になります。黒（0）の文字や線は反転して白のままです。反転した後で全体を暗くしたいなら、invert(100%) hue-rotate(180deg) brightness(90%) と手で並べ替えます。こちらでは白が 0（黒）、黒が 0.9（明るい灰色）になります。

フィルターは地図タイルの画像にだけ付け、出典の表示には付けないでください。地理院タイル一覧は、ウェブサイトでリアルタイムに読み込む場合について「出典の明示のみで申請不要」とし、出典は「国土地理院」または「地理院タイル」等と記載して一覧ページへのリンクを付けるよう求めています（地理院タイル一覧）。また国土地理院コンテンツ利用規約は「コンテンツを編集・加工等して利用する場合は、上記出典とは別に、編集・加工等を行ったことを記載してください」としています（国土地理院コンテンツ利用規約）。表示時に色を変えることがこれに当たるかどうかは規約に書かれていないため、判断に迷うときは国土地理院に確認してください。

例：見出しを載せる写真を暗くする

ヒーロー画像の上に白い見出しを重ねるとき、写真だけを暗くすると文字が読みやすくなります。「明るさ」を 60 にすると、出力は次のとおりです。

.element {
  filter: brightness(60%);
}

brightness は各チャンネルに 0.6 を掛けます（0% で真っ黒、100% でそのまま）。このルールは img に付け、見出しを含む外側の要素には付けません。フィルターは要素と子孫をまとめて描画したものにかかるので、外側に付けると見出しの白も 60% に暗くなります。暗くした後の写真と文字のコントラストは、実際の画像で確認してください。

制限

• 調整できる範囲：ぼかし 0〜20px（0.1px 刻み）、明るさ・コントラスト・彩度 0〜200%、色相回転 0〜360deg、そのほかは 0〜100%。仕様ではもっと大きな値も書けます。明るさ・コントラスト・彩度には上限がなく、グレースケール・反転・不透明度・セピアは 100% を超えると 100% として扱われます。必要ならコピーした CSS を手で直します。
• drop-shadow() と SVG フィルターを参照する url() は生成しません。すりガラスのようにパネルの背後をぼかすのは backdrop-filter で、filter: blur() は要素自身を文字ごとぼかします。
• filter が none 以外の要素は、絶対配置と固定配置の子孫の包含ブロックになります。ただしルート要素（html）は例外です。
• プレビュー画像は 5 MB（5,242,880 バイト）までです。上限を超えるファイル、画像でないファイル、このブラウザーでデコードできないファイル（0 バイトのファイル、拡張子を .png に変えたテキスト、ブラウザーが対応していない HEIC など）は読み込まず、ステータス行に理由を表示し、プレビューは元の画像のままです。ブラウザーが画像の種類を報告するか、ファイル名が一般的な画像の拡張子で終わるときだけ画像として扱うので、拡張子のない画像ファイルも読み込みません。
• 9項目の数値はこのブラウザーに保存されます。画像は保存されません。

代表的な活用シーン

CSS フィルターは、画像のホバー効果（通常時はグレースケール、ホバーでカラー）、ダークモードでのスクリーンショットの調整（反転と色相回転）、読み込み中のプレースホルダー（グレースケールと明るさ）、セピアや高コントラストといった写真の加工表現によく使われます。背後をぼかす表現には backdrop-filter を使います。