CSS Filter プレイグラウンド
スライダー操作でプレビューが即時更新。自分の画像をアップロードするか、既定のサンプルですぐに確認できます。
JiniTools
プレビュー
CSS
使い方
1
プレビューを選ぶ
「サンプル」または自分の画像をアップロードしてプレビューを設定。テキスト要素にもフィルター効果が同時に適用されます。
2
フィルター調整
9個のスライダー(blur·brightness·contrast·grayscale·hue-rotate·saturate·sepia·invert·opacity)をそれぞれ調整。各フィルターに「リセット」ボタンがあり既定値に素早く戻せます。
3
コードコピー
結果のfilter CSSをワンクリックでコピー。既定値(no-op)のフィルターは自動的にコードから除外されます。
よくある質問
CSS filterは何に使う？
画像·ボックスにぼかし、白黒、色相回転などの視覚効果を適用する際に使用。ホバー効果、ダークモード、非活性状態の表示などUIディテールに有用。
複数フィルターを同時適用できる？
はい。CSS filterは空白で区切って複数の関数を同時適用可能(例: filter: blur(2px) grayscale(50%))。本ツールはすべてのスライダーを1つのコードで出力します。
backdrop-filterとの違いは？
filterは要素自体に、backdrop-filterは要素の「背後」の背景に適用されます。グラスモーフィズムのような半透明効果はbackdrop-filterを使います(本ツールはfilterのみ対応)。
モバイルでも動作する？
はい。CSS filterはiOS Safari·Android Chromeを含むすべての最新ブラウザでサポート。blurのような重いフィルターは大きな要素でパフォーマンス低下の可能性があります。
サーバーに送信されますか？
いいえ。アップロードした画像はブラウザ内プレビュー用途のみで、生成されたCSSも外部に送信されません。
