--- title: "CSSフィルタージェネレーター - filterプロパティのコードを生成" description: "CSSのfilterプロパティを調整し、ぼかし・明るさ・コントラスト・色相・彩度などの効果を確認しながら `filter: ...;` のコードを生成できるツールです。スライダー操作で値を組み合わせ、対象画像やUI要素に設定するフィルターを組み立てられます。" canonical_url: "https://web-toolbox.dev/tools/css-filter-generator" meta: author: K "og:description": "CSSのfilterプロパティを調整し、ぼかし・明るさ・コントラスト・色相・彩度などの効果を確認しながら `filter: ...;` のコードを生成できるツールです。スライダー操作で値を組み合わせ、対象画像やUI要素に設定するフィルターを組み立てられます。" "og:image": "https://web-toolbox.dev/og/ja/tools/css-filter-generator-61af21c2.png" "og:image:alt": CSSフィルタージェネレーター "og:image:height": "630" "og:image:width": "1200" "og:title": "CSSフィルタージェネレーター - filterプロパティのコードを生成" --- > Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt) # **CSSフィルタージェネレーター** CSSフィルターを調整してコードを生成 ## **フィルターパラメータ** Blur px Brightness % Contrast % Grayscale % Hue-Rotate deg Invert % Opacity % Saturate % Sepia % ## **プレビュー** ![サンプル画像](https://picsum.photos/seed/1793412553671/800/450) **CSSコード** ``` filter: blur(0px) brightness(100%) contrast(100%) grayscale(0%) hue-rotate(0deg) invert(0%) opacity(100%) saturate(100%) sepia(0%); ``` ## CSSフィルタージェネレーターとは？ CSSフィルタージェネレーターは、画像にかける `**filter**` の値をブラウザ上で調整し、そのまま使えるCSSコードを作るツールです。ぼかしや明るさの補正だけでなく、色相の回転やセピア、反転、不透明度の調整までまとめて試せるので、見た目を確認しながら値を決めたいときに役立ちます。 プレビューを見ながら調整すると、最終的に `**filter: ...;**` の形でコードが出力されます。画像の雰囲気を少し変えたいときから、複数のフィルターを組み合わせて印象を大きく変えたいときまで使いやすい構成です。 ## 使い方 1. 左側のスライダーで各フィルターの値を調整します。 2. 必要に応じてスイッチで個別のフィルターをオン・オフします。 3. 右側のプレビューで見た目を確認します。 4. 生成されたCSSコードをコピーして使います。 途中でやり直したいときは、フィルターリセットで初期値に戻せます。スライダーは値を調整、スイッチはそのフィルターを一時的に無効化する目的で使い分けます。 ## プレビュー画像について プレビュー画像は `**サンプル画像**` タブと `**アップロード**` タブで切り替えられます。タブを切り替えてもプレビューの位置と `**filter**` の結果は変わりません。 - サンプル画像: 外部サービスのサンプル画像を表示します。プレビュー下の `**別のサンプル**` で別のサンプル画像に切り替えられます。 - アップロード: 画像ファイルを 1 つアップロードしてプレビューに使えます。アップロードできるのは 1 枚で、処理はブラウザ内だけで完結します。別の画像を使うときは `**クリア**` で破棄してから新しいファイルをアップロードしてください。 ## 調整できる主なフィルター ### 見た目をぼかしたり明るさを整えるフィルター #### Blur 画像をぼかします。背景画像をやわらかく見せたいときや、前面のテキストを目立たせたいときに便利です。 #### Brightness 画像全体の明るさを調整します。暗い写真を少し見やすくしたいときや、背景を明るくして圧迫感を減らしたいときに使えます。 #### Contrast 明暗差を強めたり弱めたりします。輪郭をくっきり見せたいときや、全体の差を抑えてやわらかい印象にしたいときに向いています。 #### Opacity 画像の不透明度を調整します。背景画像を薄く表示したいときや、重ねる文字やUIを読みやすくしたいときに使いやすい項目です。 ### 色味を変えるフィルター #### Grayscale 画像をモノクロに近づけます。装飾を控えめにしたいときや、色数を抑えたデザインに寄せたいときに向いています。 #### Hue-Rotate 色相を回転させて色味を変えます。元画像の配色を大きく変えたいときや、ブランドカラーに寄せて試したいときに便利です。 #### Invert 色を反転します。ダークテーマ向けの見た目を試したいときや、特殊な表現を作りたいときに使えます。 #### Saturate 彩度を調整します。色を鮮やかにしたいときにも、逆に彩度を抑えて落ち着いた印象にしたいときにも使えます。 #### Sepia 画像をセピア調に変えます。レトロな雰囲気や温かみのある色味を簡単に試したいときに便利です。 ## 活用シーン - ヒーロー画像やバナー画像の雰囲気を調整したいとき - 背景画像の主張を弱めて文字を読みやすくしたいとき - サムネイルやカード画像に統一感を出したいとき - デザイン案の比較用に、複数のフィルター設定をすばやく試したいとき ## 使うときのポイント - フィルターを重ねるほど見た目の変化が大きくなるため、少しずつ調整すると意図した結果に近づけやすくなります - `**Opacity**` や `**Blur**` を大きくしすぎると、画像の内容が分かりにくくなることがあります - このツールで出力されるのは `**filter**` プロパティなので、適用先の要素や画像サイズ自体は別途CSSで調整します まずは明るさとコントラストを軽く整えてから、必要に応じて彩度や色相を触るとバランスを見やすくなります。 **使ってみてどうでしたか？** 最終更新: 2026年7月10日 ### **関連ツール** - [

**Border Radiusジェネレーター**

](https://web-toolbox.dev/tools/border-radius-generator) - [

**Box Shadowジェネレーター**

](https://web-toolbox.dev/tools/box-shadow-generator) - [

**CSS背景パターンジェネレーター**

](https://web-toolbox.dev/tools/css-background-pattern-generator) - [

**CSSグラデーションジェネレーター**

](https://web-toolbox.dev/tools/css-gradient-generator) - [

**グラデーションテキストジェネレーター**

](https://web-toolbox.dev/tools/gradient-text-generator) - [

**Squircleジェネレーター**

](https://web-toolbox.dev/tools/squircle-generator) - [

**CSSカーソルビューワー**

](https://web-toolbox.dev/tools/css-cursor-viewer) - [

**SVG to CSS変換**

](https://web-toolbox.dev/tools/svg-to-css) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"ja-JP","name":"Web ToolBox","url":"https://web-toolbox.dev/","workTranslation":{"@id":"https://web-toolbox.dev/en#website"}},{"@id":"https://web-toolbox.dev/tools/css-filter-generator#webpage","@type":"WebPage","description":"CSSのfilterプロパティを調整し、ぼかし・明るさ・コントラスト・色相・彩度などの効果を確認しながら `filter: ...;` のコードを生成できるツールです。スライダー操作で値を組み合わせ、対象画像やUI要素に設定するフィルターを組み立てられます。","name":"CSSフィルタージェネレーター - filterプロパティのコードを生成","url":"https://web-toolbox.dev/tools/css-filter-generator","isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/css-filter-generator"]}]},{"@id":"https://web-toolbox.dev/tools/css-filter-generator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"CSSのfilterプロパティを調整し、ぼかし・明るさ・コントラスト・色相・彩度などの効果を確認しながら `filter: ...;` のコードを生成できるツールです。スライダー操作で値を組み合わせ、対象画像やUI要素に設定するフィルターを組み立てられます。","name":"CSSフィルタージェネレーター - filterプロパティのコードを生成","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]} ``` ## Sitemap See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.