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.