無料 · デザインとCSS
Liquid Glass CSS ジェネレーター.
Apple 風のリキッドグラスを CSS で作成。ぼかし、彩度、色合い、縁のハイライト、影、任意の SVG 屈折効果をライブプレビューで調整できます。
Loading the calculator…
使い方: Liquid Glass CSS ジェネレーター
データを入力するかファイルを選び、設定を調整して結果を生成します。コピーやダウンロードの前に結果を確認してください。
制限と対応形式
入力内容はお使いの端末で処理されます。
英語の技術説明
Refraction works in Chromium only; other browsers keep the blur. Everything is calculated in your browser; nothing you type is uploaded.
backdrop-filter blurs and saturates what is behind the element; inset shadows draw the bright and dark edges; an optional SVG feDisplacementMap bends the background.
The “iOS 26 style” preset gives a 28 px card with blur(14px) saturate(180%), a 12 % white tint and a bright top edge.