N2
NanToo
デザイン・Web制作

CSS filter ジェネレーター

blur、brightness、contrast、grayscale、hue-rotate、saturate などの CSS filter をスライダーで調整し、プレビューしながらコードを生成するツール。

CSS

.image {
  filter: blur(0px) brightness(100%) contrast(100%) grayscale(0%) hue-rotate(0deg) saturate(100%) sepia(0%) invert(0%);
}
このツールについて問い合わせる →

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

CSS filter ジェネレーターとは

CSS filter ジェネレーターは、画像や要素に適用する filter プロパティを視覚的に調整し、CSSコードとしてコピーできるツールです。blur、brightness、contrast、grayscale、hue-rotate、saturate、sepia、invert をスライダーで確認できます。

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

実務で便利な場面

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

よくある質問

Q. 画像はサーバーに送信されますか？
いいえ。アップロードした画像はブラウザ内のプレビューにだけ使われ、サーバーには保存されません。
Q. 画像加工ツールとの違いは何ですか？
画像加工ツールはファイル自体を書き換えます。このツールはCSSの表示効果を作るため、元画像を変更せずにWeb上で効果を適用できます。

出典・参考文献

このツールを評価
—(0件)