CSS フィルタープレイグラウンド
9 種類の CSS フィルタ関数をスライダーで調整するとプレビューがリアルタイム更新（自分の画像をドロップまたは内蔵グラデーションブロック）。6 つのプリセット（Cool・Warm・B&W・Sepia・Vintage・Inverted）で素早く開始。出力は貼り付けられる CSS `filter` ルールと Tailwind 任意値クラス。
—
プレビュー
AZ Tools
CSS
filter: none;
Tailwind
filter-none
使い方
- スライダーを調整、またはプリセットをクリック。
- 必要なら画像をドロップして実コンテンツでプレビュー。
- CSS ルールまたは Tailwind クラスをコピー。
よくある質問
- Blur が小さい値だと目立たないのは？
- CSS blur はガウシアン半径 — 約 10px を超えると気付きます。スライダー上限は 20px、それより大きなぼかしはプロダクト UI ではあまり使われません。
- 「invert」の色への影響は？
- 各チャンネルを 255 − 値に置き換え。ダークモードのテクニックには有用ですが、写真も反転するので通常はアイコンやテキストにのみ使います。
- 未変更のスライダーが出力に現れないのは？
- CSS filter ルールは実際に変えた関数のみを含めます（例：brightness(100%) は既定で省略）。
- Tailwind 任意値クラスは？
- Tailwind には組み込みショートカット（blur-md, contrast-125）がありますが全値があるわけではありません。任意値 `filter-[…]` でどんなフィルタもユーティリティとして使える — プロトタイピングに便利。
関連ツール
画像ぼかし
Gaussian・ボックス・モーションぼかしをブラウザで適用。半径0-64px調整可、等価なCSS filter文字列も提供。
画像 0 0
CSS Flexbox プレイグラウンド
flex-direction・justify-content・align-items・gap をクリックで調整 — CSS や Tailwind クラスをコピー。
開発 0 0
CSS Grid プレイグラウンド
grid-template-columns / rows・gap・アイテム整列を視覚的に — CSS をそのままコピー。
開発 0 0
画像デュオトーン効果
どんな画像にも2色デュオトーン効果を適用 — シャドウカラー·ハイライトカラー選択、ミッドポイント·コントラスト調整、結果ダウンロード。Spotify風カバーが2クリックで。
画像 0 0
CSS clip-path ビルダー (円、楕円、多角形、Inset)
CSS `clip-path` プロパティのビジュアルビルダー — 形状を選択 (円、楕円、inset、多角形)、スライダーで数値調整、プレビュークリックで多角形の点を追加、貼り付け可能な CSS 宣言をコピー。10 種の形状プリセット (三角形、六角形、星、矢印、吹き出し、十字など) を内蔵。
カラー 0 0
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー 0 0