Tailwind CSSと併用できますか？

はい。CSSバックドロップフィルターが出力するCSSはTailwind CSSの任意のクラスと共存でき、必要に応じて任意値クラス（[xxx]記法）への変換も可能です。

広告は表示されますか？

運営維持のため一部ページに広告を表示していますが、ツール本体の動作を妨げない範囲に留めています。ブロッカーを利用されても機能は動作します。

デザイン・CSS無料登録不要

CSSバックドロップフィルター

背景のぼかし・明るさ・コントラストなどのbackdrop-filterプロパティのCSSコードを生成する無料オンラインツール。

ぼかし: 10px

明るさ: 100%

コントラスト: 100%

彩度: 100%

Preview

backdrop-filter: blur(10px) brightness(100%) contrast(100%) saturate(100%);
-webkit-backdrop-filter: blur(10px) brightness(100%) contrast(100%) saturate(100%);

FAQ

よくある質問

いいえ。CSSバックドロップフィルターはすべての処理をお使いのブラウザ内で完結させます。入力内容がサーバーに送信されたり保存されたりすることはありません。

こちらもおすすめ

CSS blur()生成

CSS filter: blur()のコードを生成する無料オンラインツール。

CSS brightness()生成

CSS filter: brightness()のコードを生成する無料オンラインツール。

CSS contrast()生成

CSS filter: contrast()のコードを生成する無料オンラインツール。

CSS filter関数

CSS filter関数を表示する無料オンラインツール。CSS filter関数をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。

読み込み中...