デザイン・Web制作

CSS filter ジェネレーター

8種類の CSS filter を適用順どおりに調整し、検証済みローカル画像でプレビューしながら副作用を抑えたCSSを生成するツール。

登録不要

フィルター設定

中立値の機能はCSSから省略します。複数の効果は、下の並び順で適用されます。

プレビュー

静止画のJPEG・PNG・WebP、10MB・一辺16,384px・40メガピクセルまで。画像ファイルはこの機能からサーバーへ送信しません。

生成CSS

適用中: 0種類

.image {
  filter: none;
}

このツールについて問い合わせる →

CSS filter ジェネレーターについて

CSS filter ジェネレーターとは

CSS filter ジェネレーターは、画像や要素に適用する filter プロパティを視覚的に調整し、CSSコードとしてコピーできるツールです。この画面では blur、brightness、contrast、grayscale、hue-rotate、saturate、sepia、invert の8種類を扱います。

画像圧縮や画像変換とは違い、画像ファイル自体を加工するのではなく、Webページ上で表示効果として使うCSSを作成します。

生成CSSの読み方と注意点

複数のfilter関数は記載順に適用され、順序を変えると見た目も変わる場合があります。このツールは画面の上から下の順で出力し、中立値の関数は省略します。すべて中立値なら filter: none を生成します。

filter の計算値が none 以外になると、要素がstacking contextやabsolute/fixed配置の包含ブロックを作る場合があります。視覚効果だけでなく、重なり順や子要素の配置も実ページで確認してください。CSS仕様にある opacity と drop-shadow は、この画面の調整対象には含みません。

実務で便利な場面

  • カード画像を少し暗くして文字を読みやすくする
  • ホバー時だけ彩度や明度を変える
  • アップロードした画像で効果を確認してからCSSだけをコピーする

任意のプレビュー画像は実データを確認し、静止画のJPEG・PNG・WebP、10MB・一辺16,384px・40メガピクセルまでをブラウザ内で読み込みます。画像そのものをこの機能からサーバーへ送信せず、生成するのはCSSだけです。

よくある質問

Q. 画像はサーバーに送信されますか？
このツールのプレビュー機能は画像ファイルをNanTooの処理サーバーへ送信せず、ブラウザ内でだけ読み込みます。サイト共通のページ表示・アクセス計測・広告配信等の通信とは別です。
Q. 画像加工ツールとの違いは何ですか？
画像加工ツールはファイル自体を書き換えます。このツールはCSSの表示効果を作るため、元画像を変更せずにWeb上で効果を適用できます。
Q. すべて初期値のときにfilter: noneを出すのはなぜですか？
見た目が変わらない関数列でも、filterの計算値がnone以外なら重なり順や子要素の配置に影響し得るためです。中立値だけのときは副作用を避けるためnoneを出します。
このツールを評価
—(0件)