CSS Glassmorphism ジェネレーター
「CSS Glassmorphism ジェネレーター」はコード、データと QRに使えるブラウザツールです。入力内容と結果は通常この端末内で処理され、登録は必要ありません。
使い方
使い方
- Choose the background and panel colors, then set opacity, blur, saturation, border, radius, and shadow.
- Review the live preview and keep text contrast in mind.
- Generate, copy, or reset the CSS.
A practical glass recipe
The generator combines an rgba panel background, a translucent border, backdrop-filter blur and saturation, a radius, and a soft shadow. The preview uses an original multi-color gradient so the transparency and blur remain visible.
Fallbacks and accessible contrast
Browsers without backdrop-filter still show the translucent panel background, but the glass effect is reduced. Check the contrast of every text and icon placed on top of the panel; decorative translucency must not replace a readable solid or high-contrast treatment.
よくある質問
あわせて知りたいこと
What happens without backdrop-filter support?
The panel keeps its translucent background, border, radius, and shadow. Only the background blur and saturation enhancement are unavailable.
Why can the same settings look different?
Blur and saturation depend on the colors and detail behind the panel, while percentage opacity blends with the current background.
How should I check text contrast?
Preview the actual text over the final background and use a sufficiently opaque panel or stronger text color when the contrast is not clear at every point.