このツールについて
ぼかし、明るさ、コントラスト、グレースケール、色相回転、階調反転、不透明度、彩度、セピアを調整するツールです。プレビューにはページ内の図形を使用し、外部の画像を読み込みません。
使い方
- スライダーを動かすか、数値を入力してフィルターを調整します。
- 色、輪郭、透明感の変化をリアルタイムで確認します。
- 生成されたfilter宣言をコピーします。
- 「リセット」ですべてを初期値に戻すと、filter: noneが出力されます。
使用例
- grayscale(100%)は、完全なグレースケールにします。
- brightness(120%)は明るさを増し、brightness(100%)は元の明るさを保ちます。
- blur(2px)は輪郭をぼかし、opacity(50%)は要素を半透明にします。
filter: blur(2px) brightness(120%) contrast(110%) saturate(130%);
filter: none;仕組みとCSSの解説
CSS filterは、描画された要素に宣言順で視覚効果を適用します。既定値はblur 0px、brightness 100%、contrast 100%、grayscale 0%、hue-rotate 0deg、invert 0%、opacity 100%、saturate 100%、sepia 0%です。既定値の項目は省略でき、すべて既定値の場合はnoneを出力します。
主な用途
- カード、イラスト、画像のフィルター効果を比較する。
- ホバー時やテーマ用の視覚効果をCSSで作る。
- 複数のfilter関数を組み合わせた効果を学ぶ。
プライバシーについて
入力、計算、CSSの生成、プレビューはすべてお使いのブラウザー内で完結します。入力内容をアップロードせず、バックエンド、データベース、オンラインAPI、外部CDNも使用しません。入力の自動保存も行いません。
FAQ
CSS filterとは何ですか？
要素にぼかし、明るさ、色、不透明度などの視覚効果を適用するCSSプロパティです。
brightness(100%)は何を意味しますか？
元の明るさを保ちます。100%未満なら暗くなり、100%より大きいと明るくなります。
blur()とopacity()はどう使いますか？
blur()は0以上の長さでぼかしを指定します。opacity()は0～100%で不透明度を指定し、100%が完全に不透明です。
CSS filterは元の画像を変更しますか？
いいえ。ブラウザーでの見た目だけが変わり、元の画像ファイルには書き込みや変更を行いません。
リセットするとfilter: noneになるのはなぜですか？
すべての設定が効果のない既定値に戻ると、noneだけで同じ状態を表せます。各関数の既定値を列挙する必要がないためです。