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

サンプル画像や手持ちの画像に、blur・brightness・contrast・grayscale・sepiaなどのCSS filter関数を組み合わせて適用し、結果をプレビューしてコードをコピーできます。

プリセット

フィルター関数

ぼかしpx

明るさ%

コントラスト%

グレースケール%

色相回転deg

色反転%

不透明度%

彩度%

セピア%

ドロップシャドウ

drop-shadow() を追加

画像

自分の画像を使う

画像はローカルで表示されるだけで、アップロードされません。

プレビュー

CSS コード

filter: none;

CSSフィルタージェネレーターとは？

CSSの filter プロパティを、画像にリアルタイムで適用します。ぼかし、明るさ、コントラスト、グレースケール、色相回転、色反転、不透明度、彩度、セピア、drop-shadowを組み合わせ、元画像と結果を比較して、コードをコピーできます。内蔵のサンプル画像も、自分の画像（端末内にとどまります）も使えます。

CSSフィルタージェネレーターの使い方

プリセット（白黒、ビンテージ、暖色、寒色、ドラマチックなど）を選ぶか、なしから始めます。
各フィルター関数のスライダーを動かします。
必要に応じて、drop-shadow() を追加を有効にし、そのオフセット、ぼかし、色、不透明度を設定します。
自分の画像を使うをクリックして、ローカルファイルでテストします。
CSSコードをコピーします。

例

入力

blur 2px, brightness 120%, hue-rotate -90°, sepia 50%, drop-shadow on (4px 4px 6px, black at 0.5)

出力

filter: blur(2px) brightness(120%) hue-rotate(-90deg) sepia(50%) drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));

CSSフィルタージェネレーターを使うべき場面

画像のホバー効果、写真のスタイルの統一、暗くした背景、透過PNG/SVGの形に沿う影（drop-shadow）に使います。画像ファイル自体は変更しません。恒久的な編集には、画像エディターや、サイトの画像ツールを使ってください。要素自体ではなく、要素の背後にあるものに影響させたい場合は、backdrop-filterを使います（Glassmorphism Generatorを参照）。

CSSフィルタージェネレーターの仕組み

中立値と異なる関数だけが書かれます（たとえばbrightnessは100%なら省略）。順序は、blur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate、sepia、drop-shadowで固定です。CSSでは、各関数が直前の関数の出力に適用されるため、順序が重要です。何も変更していない場合の出力は filter: none; です。画像はローカルのオブジェクトURLで表示され、アップロードされることはありません。