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

リファレンス

CSS filterプロパティとは？

CSS filterプロパティは、ぼかし、色シフト、コントラスト調整などのグラフィック効果を要素に適用します。フィルターは要素が合成される前に適用され、ボーダーやシャドウを含む要素全体に影響します。複数のフィルター関数を1つの宣言で連鎖できます。

すべてのCSSフィルター関数

blur(px)：ガウスぼかしを適用。高い値 = より多くのぼかし。
brightness(%)：明るさを調整。100% = 元の画像、0% = 完全に黒。
contrast(%)：コントラストを調整。100% = 元の画像、0% = 完全にグレー。
grayscale(%)：グレースケールに変換。0% = 元の画像、100% = 完全にグレー。
hue-rotate(deg)：色相環上で色を回転。0deg = 元の画像、180deg = 反対の色相。
invert(%)：色を反転。0% = 元の画像、100% = 完全に反転。
opacity(%)：透明度を調整。100% = 完全に不透明、0% = 完全に透明。
saturate(%)：彩度を調整。100% = 元の画像、100%超 = 超飽和。
sepia(%)：セピアトーンを適用。0% = 元の画像、100% = 完全にセピア。

パフォーマンスの考慮事項

CSSフィルターは最新ブラウザでGPUアクセラレーションされます。しかし、大きな領域にフィルターを適用したり、フィルター値をアニメーションさせるとリペイントが発生する可能性があります。最適なパフォーマンスのために：アニメーション要素にwill-change: filterを使用し、要素の背後のみをぼかしたい場合はbackdrop-filterを推奨。

一般的な使用例

画像ホバーエフェクト — 通常時はグレースケール、ホバー時にカラー。
無効状態 — filter: grayscale(100%) opacity(50%)で無効なUI要素を表現。
ダークモード — filter: invert(1) hue-rotate(180deg)で簡易ダークモード。
背景ぼかし — backdrop-filter: blur(10px)ですりガラス効果。
ビンテージ写真 — セピア、コントラスト、明るさを組み合わせてアナログフィルム風に。

プライバシー

すべてのフィルター生成はブラウザで100%実行されます。データはサーバーに送信されません。アップロードされた画像はデバイス上に留まります。