CSS filterジェネレーター
ぼかし・明るさ・コントラスト・グレースケール・色相回転・セピアなどのスライダーを動かすと、サンプル図形へのプレビューと生成されるfilter宣言がリアルタイムに更新されます。「ヴィンテージ」「モノクロ」などのプリセットから始めることもできます。要素の影には CSS box-shadowジェネレーター もご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
プリセット
プレビュー
フィルター
drop-shadow
注意事項
- 効果のない値（brightness 100% など）は出力から省略され、すべて初期値のときは `filter: none;` になります。
- filterは左から順に適用されるため、順序によって見た目が変わることがあります。このツールは表示順の固定です。
- プレビューはCSSだけで描いたサンプル図形です。実際の画像や要素では見え方が異なる場合があります。
- blur値が大きい要素や多数の要素に適用すると、描画が重くなることがあります。
- 色の入力は6桁の16進数のみです（アルファ非対応）。
用語解説
filter
要素にぼかしや色調補正などの視覚効果を加えるCSSプロパティ。`filter: blur(4px) grayscale(50%);`のように複数の関数をスペース区切りで指定する。
drop-shadow
要素の透明部分を考慮して、見た目の輪郭に沿った影を付けるfilter関数。box-shadowと違い、透過PNGや図形の形に沿う。
hue-rotate
色相環上で色を指定した角度だけ回転させるfilter関数。0〜360度で指定する。
よくある質問
filterのdrop-shadowとbox-shadowは何が違いますか？
box-shadowは要素の四角い枠に影を付けますが、drop-shadowは透明部分を除いた見た目の輪郭に沿って影を付けます。透過PNGや丸い図形の形どおりに影を出したいときはdrop-shadowを使います。
複数のfilterを組み合わせると順序は関係ありますか？
関係します。filterは左から順に適用されるため、たとえば grayscale のあとに sepia を重ねるのと逆では結果が変わることがあります。このツールは表示順が固定で、変更した関数だけをその順に出力します。
blurやfilterを使うと表示が重くなりますか？
大きなblur値や、多数の要素・大きな画像への適用は描画負荷が高くなることがあります。アニメーションで値を変える場合は特に、必要な範囲に絞って使ってください。
filterとbackdrop-filterの違いは何ですか？
filterは要素自身とその子要素に効果をかけます。backdrop-filterは要素の背後にあるものに効果をかけ、すりガラス風の表現に使います。後者はCSS Glassmorphismジェネレーターで扱っています。
このページをシェア