CSSフィルター生成ツール
blur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate、sepiaのスライダーを組み合わせて、1つのチェーンされたfilterプロパティを作成します。
入力
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-filter-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"blur": "2",
"brightness": "110",
"contrast": "100",
"grayscale": "50",
"hueRotate": "0",
"invert": "0",
"opacity": "100",
"saturate": "100",
"sepia": "0"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-filter-generator` tool (CSS Filter Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-filter-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSフィルター生成ツール — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
CSSのfilterプロパティとは?
filterはぼかし、色調整など、さまざまなグラフィック効果を単一のCSS行でオブジェクトに直接適用できます。画像エディターや余分なマークアップは必要ありません。複数の関数は1つの宣言内でチェーンでき、スペースで区切られ、ブラウザーはそれらを書かれた順序で適用します。ホバーエフェクト、画像処理（グレースケールギャラリー、セピア「ビンテージ」ルック）、無効状態のスタイル設定、迅速なブランドカラーティンティングに広く使用されています。
このツールでカバーされている9つのフィルター機能
blur(px)— ガウシアンぼかしでオブジェクトを柔らかくします。値が大きいほどぼかしが強くなります。brightness(%)— 明度をスケーリングします。100%は変更なし、以下は暗くなり、以上は明るくなります。contrast(%)— 明るい領域と暗い領域の差をスケーリングします。100%は変更なし。grayscale(%)— 黒と白に向かって彩度を除去します。100%は完全にグレースケール。hue-rotate(deg)— 指定された角度だけ色環の周りすべての色相を回転します。invert(%)— 色を反転します。100%は写真のネガのような効果を生成します。opacity(%)— オブジェクトを半透明にします。opacityプロパティと同様ですが、フィルター機能として機能します（他と組み合わせることができます）。saturate(%)— 色の強度をスケーリングします。100%以下で色がくすみ、100%以上でより鮮やかになります。sepia(%)— 画像を温かみのある茶色の「古い写真」トーンにシフトします。100%は完全にセピア。
このツールの使い方
- 任意のスライダーをドラッグしてそのフィルター機能を調整します。生成されたCSSは作業中にリアルタイムで更新されます。
- 複数のスライダーを組み合わせて、段階的な効果を構築します（例えば、
sepiaにタッチを加えたcontrastブーストでビンテージルック）。 - スライダーをデフォルト位置（変更なし）のままにすると、その機能をスキップできます。このツールは実際に出力を変更する機能のみを記述し、生成された行を短く読みやすく保ちます。
- CSSボックスから生成されたCSSをコピーするか、
.cssファイルとしてダウンロードし、スタイルシートまたは<style>ブロックに貼り付けます。任意のセレクターに適用します：.my-element { filter: ...; }。
関数の順序
複数のフィルターがアクティブな場合、このツールは常に固定された順序で記述します — blur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate、sepia — フォーム内のスライダーの順序に対応しています。CSSはチェーンされたフィルター関数を左から右に適用するため、後で出力を手動で編集する場合はこれを覚えておいてください。関数を再度配置すると視覚的な結果が変わる可能性があります。特にぼかしが色調整と混在している場合。
FAQ
出力が毎回すべてのフィルター関数をリストしないのはなぜですか？
ニュートラル値に設定されたフィルター（brightness(100%)、blur(0px)など）はオブジェクトの外観を変更しないため、それを含めるとノイズになります。このツールはno-op関数を省略し、すべてのスライダーがデフォルトの場合はfilter: none;にフォールバックします。
これらのフィルターをアニメーションまたはトランジションできますか？
はい — filterはCSS transitionまたは@keyframesでアニメーション化でき、スムーズなホバーエフェクトを構築するための一般的な方法です（例えばtransition: filter 0.2s ease;と異なるフィルター値に切り替わる:hoverルール）。
filterはレイアウトに影響しますか？
いいえ。transformと同様に、filterは純粋に視覚的です。周囲のコンテンツを再フローしませんが、大きなblurはオブジェクトのボックスの外に視覚的に漏れる可能性があります。
filterはすべてのブラウザーでサポートされていますか？
はい、プレフィックスなしのfilterはすべての最新ブラウザーで完全にサポートされています。
filter: opacity()とCSSopacityプロパティの違いは何ですか？
どちらも同じ視覚的な結果をレンダリングしますが、filter: opacity()は他のフィルター関数と1つのfilterチェーン内で合成されます。一方、スタンドアロンのopacityプロパティは個別のより単純な宣言です。他のフィルターをチェーンしていない限り、通常のopacityプロパティを使用します。
プライバシー
すべてはあなたのブラウザーで発生します。入力したCSS、値、または設定がサーバーに送信されることはありません。スライダーを調整すると、宣言がローカルで生成および更新されます。