CSS画像フィルター生成CSS Filter Generator
グレースケール・ぼかし・明るさなどをスライダーで調整し、CSSのfilterを視覚的に生成。Visually generate the CSS filter property with grayscale, blur, brightness sliders and more.
お気に入りについて About favorites
この端末のブラウザにのみ保存され、サーバーには送信されません。 Saved on this device only—never sent to our servers.
読み込み中... Loading...
他にも100以上のツールがあります There are 100+ other tools
他のツールも見る See other tools使い方・ユースケース How to Use & Use Cases
サンプル画像（または自分の画像をアップロード）にグレースケール・ぼかし・明るさ・コントラスト・彩度・セピア・色相回転のスライダーを適用すると、プレビューがリアルタイムに更新され、対応するCSSの`filter`プロパティが生成されます。「画像をダウンロード」でフィルター適用後のPNGも保存できます。 Apply grayscale, blur, brightness, contrast, saturation, sepia, and hue-rotate sliders to the sample image (or upload your own) to see a live preview and the matching CSS filter property. Click "Download image" to save the filtered result as a PNG too.
写真をモノクロ・セピア調にしたいとき、ホバー時に画像を暗くするエフェクトのCSSがほしいとき、Instagram風のフィルターをCSSだけで再現したいときに使えます。 Useful for converting a photo to black-and-white or sepia tone, getting the CSS for a darken-on-hover image effect, or recreating an Instagram-style filter using only CSS.
よくある質問FAQ
生成されるCSSはどのプロパティですか？Which CSS property is generated?
要素の`filter`プロパティを生成します。複数の効果はスペース区切りで1つの`filter`値にまとめられます（例：`filter: grayscale(50%) blur(2px);`）。The filter property. Multiple effects are combined into one space-separated value (e.g. filter: grayscale(50%) blur(2px);).
画像をアップロードする必要がありますか？Do I need to upload an image?
必須ではありません。サンプル画像で効果を確認できます。自分の画像を使いたい場合はアップロードして同じ操作で調整できます。No. You can preview effects on the built-in sample image. Upload your own photo to adjust it the same way.
ダウンロードした画像にフィルターは焼き込まれますか？Is the filter baked into the downloaded image?
はい。「画像をダウンロード」で保存されるPNGは、プレビューのフィルターがピクセルに適用された状態で書き出されます。CSSの`filter`を使わずそのまま画像として利用できます。Yes. The downloaded PNG has the filter applied to the actual pixels, so you can use it as a standalone image without needing CSS filter.
画像はサーバーに送信されますか？Is the image sent to a server?
されません。プレビュー・書き出しともにブラウザ内（Canvas API）で処理されます。No. Both preview and export happen entirely in your browser using the Canvas API.
ページを閉じれば、端末内のデータは自動的に消去されます。契約書や顧客資料など、慎重に扱うデータも安心してご利用ください。When you close the page, data on your device is cleared automatically. Safe for sensitive files such as contracts and client documents.
