반투명 유리 같은 패널 · Glassmorphism

재질 · 배경이 비치고 흐려지는 반투명 유리 표현

조회 1추천 0

직접 만든 예시

[서비스 첫 화면]을 glassmorphism으로 디자인해줘. 반투명 패널, 배경 블러, 얇은 밝은 테두리로 깊이를 만들고 본문은 읽기 쉽게 대비를 확보해줘.

빈칸을 내 상황에 맞게 채워 사용하세요.

입력과 결과 비교

설명용 예시

입력 같은 기록 서비스의 소개 문구·기능 3개·CTA

Glassmorphism · 글래스모피즘의 특징을 적용한 시각적 변형. 문구와 기능은 같고 색·재질·배치를 비교합니다.

활용 방식을 보여주는 예시이며, 직접 실행한 결과가 아닙니다.

유리처럼 겹쳐 보이는 느낌을 색상뿐 아니라 투명도·블러·경계선까지 함께 전달합니다. 배경이 복잡할수록 패널과 글자의 대비를 확인해야 합니다.

첨부 영상에서 확인한 키워드입니다. 프롬프트와 예시는 직접 제작했으며 링크는 기법 참고 문서입니다. 원출처 ↗

기존 가이드와 자세한 사용법 읽기

안녕하세요 mouseco 입니다. :)

Glassmorphism · 글래스모피즘은 배경이 비치고 흐려지는 반투명 유리 표현입니다. 이 키워드는 재질을 지정하는 데 씁니다.

복사할 문구

[서비스 첫 화면]을 glassmorphism으로 디자인해줘. 반투명 패널, 배경 블러, 얇은 밝은 테두리로 깊이를 만들고 본문은 읽기 쉽게 대비를 확보해줘.

가상의 기록 서비스에 같은 제목·기능·CTA를 두고 스타일을 바꿨습니다. 색상, 글자의 크기, 표면, 배치의 차이를 살펴보세요. 다른 스타일은 화면 위 선택창에서 바꿀 수 있습니다.

유리처럼 겹쳐 보이는 느낌을 색상뿐 아니라 투명도·블러·경계선까지 함께 전달합니다. 배경이 복잡할수록 패널과 글자의 대비를 확인해야 합니다.

이 화면은 직접 만든 해석 예시이며, 해당 스타일의 유일한 정답이나 특정 모델의 성능 비교 결과는 아닙니다. 입체 화면은 CSS 3D, 메시 배경은 CSS 그라디언트로 구현했습니다.

확인일: 2026-10-18