このツールはブラウザで即時実行できます。登録もサーバー処理も不要です。
このツールが役に立ちましたか？
byteflow.tools をインストールすると、起動が速くなり、オフラインでもツールを使えます。
インストールガイドこのツールが役に立ちましたか？
byteflow.tools をインストールすると、起動が速くなり、オフラインでもツールを使えます。
インストールガイドぼかし、透過度、境界の光彩を調整して、フロストガラス風カードを作成し、すぐ使える CSS を出力します。
フロストカード
ぼかし、透過度、境界のハイライトを整えたグラスモーフィズムパネルです。
最新の半透明 UI サーフェスのぼかし、不透明度、境界線の輝き、彩度を調整して、グラスモーフィズム カード スタイルを構築します。
ガラス スタイルを生成します。構成可能な背景の色合いアルファとぼかし強度を備えた CSS。
リアルなレイヤー深度を実現する境界線と影のアルファ コントロールが含まれています。
ブランドの視覚的な方向に合わせて彩度と半径の調整をサポートします。
コンポーネント統合のためのインスタント プレビューとエクスポート可能な CSS を提供します。
ブラーとアルファ
ブラー 18 ピクセル、不透明度 0.24
ボーダーとシャドウ
ボーダー アルファ 0.48、シャドウ アルファ 0.30
カラー設定
ティント #93c5fd、ボーダー #dbeafe、彩度 145%
バックグラウンド ルール
背景: rgba(147, 197, 253, 0.24);
バックドロップ フィルター
backdrop-filter: Blur(18px) saturate(145%);
Shadow rules
box-shadow: 0 18px 45px -26px rgba(15, 23, 42, 0.30);
ガラスパネルも見た目不透明
色合いの不透明度を下げ、背景アートワークに対して再評価します。
ぼかしは一部のブラウザでは効果がありません
背景フィルターのサポートとフォールバック スタイルが設定されていることを確認してください。
明るい背景ではテキストの可読性が低下します
コントラストを上げ、コンテンツ コンテナ オーバーレイを追加します。
境界線の輝きがきつく見えます
境界線のアルファを減らし、色合いを中間色に向けて調整します。
古いデバイスでのパフォーマンスの問題
適度なぼかし値を使用し、効果の使用を制限します。 viewport.
CSS グラスモーフィズムジェネレーター は、提出・公開・引き継ぎの前に行う迅速な検証ステップとして運用するのが適切です。
グラスモーフィズム スタイルがリアルに感じられる理由は何ですか?
バランスのとれたぼかし、微妙な境界アルファ、および制御されたコントラストが重要です。
これを明るいテーマと暗いテーマの両方で使用できますか?
はい、ただし不透明度と境界の値はテーマごとに個別に調整します。
この出力にはサポートされていないフィルターのフォールバックが含まれていますか?
幅広い互換性のために独自のフォールバック背景スタイルを追加します。
すべてのパネルでガラス効果を使用する必要がありますか?
いいえ、視覚的なノイズを避けるために使用を影響の大きい領域に制限してください。
この CSS は直接コピーできますか?
はい、ターゲット ブラウザでの可読性とパフォーマンスを検証した後です。