CSS フィルタープレイグラウンド

使い方

1. スライダーを調整、またはプリセットをクリック。
2. 必要なら画像をドロップして実コンテンツでプレビュー。
3. CSS ルールまたは Tailwind クラスをコピー。

よくある質問

Blur が小さい値だと目立たないのは？

CSS blur はガウシアン半径 — 約 10px を超えると気付きます。スライダー上限は 20px、それより大きなぼかしはプロダクト UI ではあまり使われません。

「invert」の色への影響は？

各チャンネルを 255 − 値に置き換え。ダークモードのテクニックには有用ですが、写真も反転するので通常はアイコンやテキストにのみ使います。

未変更のスライダーが出力に現れないのは？

CSS filter ルールは実際に変えた関数のみを含めます（例：brightness(100%) は既定で省略）。

Tailwind 任意値クラスは？

Tailwind には組み込みショートカット（blur-md, contrast-125）がありますが全値があるわけではありません。任意値 `filter-[…]` でどんなフィルタもユーティリティとして使える — プロトタイピングに便利。

関連ツール