본문으로 건너뛰기
Toolars
둘러보기
버그 신고

디자인 · 로컬 유틸리티

CSS 글래스모피즘 생성기

CSS Glassmorphism Generator

색조, 불투명도, 배경 흐림, 채도, 테두리 제어로 유리 질감 패널을 만들고 복잡한 배경 위에서 실제 모습을 미리 봅니다.

작업 경로 / 입력에서 결과까지

글래스 틴트 고르기

로컬에서 실행 · 업로드 없음

CSS 글래스모피즘 생성기 사용법, 개인정보 보호 및 관련 도구

작업 경로 / 입력에서 결과까지

글래스모피즘 패널을 만드는 방법

  1. 01

    글래스 틴트 고르기

    글래스 틴트로 색을 고르세요. 미리보기는 패널을 두 개의 컬러 오브 위에 띄우므로, 실제 화면처럼 복잡한 배경에 대한 재질감을 판단할 수 있습니다.

  2. 02

    불투명도와 블러 설정하기

    표면 불투명도는 0.05~0.8이며 낮을수록 더 투명합니다. 배경 블러는 0~40px로, 패널 뒤에 있는 것을 부드럽게 흐려요.

  3. 03

    채도·테두리·모서리 조정하기

    채도(50~200%)는 배경을 더 선명하게도 차분하게도 만들어요. 테두리 불투명도(0~0.8)는 틴트 색으로 가장자리를 그리고, 모서리 반경(0~48px)이 패널을 둥글게 합니다.

  4. 04

    재질 균형 잡기

    표면 컨트롤은 서로 상쇄 관계입니다. 낮은 불투명도는 유리로 읽히려면 더 많은 블러가 필요하고, 채도를 100% 위로 올리면 옅은 틴트 너머의 복잡한 배경이 바래 보이는 것을 막아주세요. 기본 재질(흰 틴트, 불투명도 0.22, 블러 18px, 채도 140%)은 검증된 중간 지점입니다.

  5. 05

    패널 CSS 복사하기

    CSS 복사 또는 .css 다운로드로 toolars-glass-panel.css를 저장하세요. .glass-panel 규칙은 rgba 배경, -webkit- 쌍을 동반한 backdrop-filter, 1px 틴트 테두리, 부드러운 그림자를 조합한 것입니다.

  6. 06

    폭백 계획하기

    backdrop-filter를 사용할 수 없어도 rgba 배경, 테두리, 그림자는 나타나요. 배경 흐림을 0으로 해도 채도 필터는 계속 적용될 수 있어서 대체 표시를 정확히 재현하지는 못해요. 대상 브라우저에서 CSS를 시험하고 글자 대비가 부족하면 표면 불투명도를 높이세요.

도구 요약

처리
브라우저에서 완결
입력의 기기 외 전송
없음
저장
아무것도 저장하지 않음
가격
무료

입력 값은 브라우저에 머물러요.

CSS 글래스모피즘 생성기 도구는 검증된 로컬 실행 경로를 사용하고, 숨겨진 입력 또는 출력 기록을 만들지 않습니다.

로컬 실행

현재 브라우저 탭 안에서 실행됩니다.

숨겨진 처리 없음

사용 중인 도구 데이터는 Toolars 문서 기록으로 남지 않습니다.

계정 불필요

프로필을 만들지 않고도 핵심 워크플로를 사용할 수 있습니다. 즐겨찾기는 로그인 후 계정에 동기화됩니다.

즉시 초기화

탭을 정리하면 사용 중이던 작업 데이터도 사라져요.

CSS 글래스모피즘 생성기 도구가 실제로 하는 일

음악 플레이어의 플로팅 컨트롤 바, 지도 위에 떠 있는 알림 카드, 사진 벽 앞에 놓인 로그인 패널까지, 반투명 유리는 페이지를 가리지 않고 깊이를 만들어요. 이 효과는 뒤에 무엇이 있는지에 따라 좌우되므로, 미리보기는 블러가 작용할 대상으로 컬러풀한 도형을 그려요. 탐색은 모두 로컬에서 이뤄지고, 아직 공개되지 않은 인터페이스의 팔레트가 기기 밖으로 나가지 않습니다. 재질이 균형을 잡으면, 볼내는 규칙이 모든 결정을 그대로 담아가요.

자주 묻는 질문

볼내는 CSS는 어떤 것인가요?
.glass-panel 규칙 하나입니다. 틴트와 불투명도로 만든 rgba 배경, 표준형과 -webkit-형 양쪽의 backdrop-filter: blur() saturate(), 테두리 불투명도로 그린 1px 틴트 테두리, 선택한 모서리 반경, 그리고 고정된 부드러운 드롭 섀도입니다.
글래스모피즘은 모든 브라우저에서 되나요?
backdrop-filter의 지원과 렌더링은 브라우저 및 버전에 따라 달라요. 내보낸 CSS에는 표준 및 -webkit- 선언이 있지만 실행 중 지원 여부를 감지하지는 않아요. 필터가 없어도 반투명 배경, 테두리, 그림자는 남으니 실제 배경에서 글자 대비를 확인하세요.
미리보기에 컬러 오브가 필요한 이유는 무엇인가요?
backdrop-filter는 요소 뒤에 있는 것을 처리하므로, 빈 배경 위의 유리는 아무것도 보여 줄 수 없습니다. 오브는 블러와 채도에 실제 대상을 주세요. 프로덕션에서 글래스 효과에 복잡한 배경이 필요한 것과 같은 이유입니다.
볼낸 규칙에서 고정된 것은 무엇인가요?
세 가지입니다. 테두리 두께는 항상 1px, 테두리 색은 항상 선택한 테두리 불투명도의 틴트 색, 드롭 섀도는 고정된 부드러운 퍼짐입니다. 그 외의 모든 것(배경, 블러, 채도, 반경)은 컨트롤을 그대로 따라가요.
유리는 어느 정도로 불투명해야 하나요?
콘텐츠 위에 뜨는 패널이라면 범위의 아래쪽 절반에 머무르세요. 기본값 0.22는 재질 너머의 배경을 읽을 수 있게 유지합니다. 복잡한 배경 위에서도 살아남아야 할 텍스트를 싣는 경우에만 올리고, 실제 폰트 크기로 대비를 확인하세요.
설정 값이 업로드되나요?
아니요. 패널의 계산과 미리보기는 모두 이 탭 안에서 이뤄지고 계정도 필요 없으며, 아무것도 저장, 기록, 전송되지 않습니다. 초기화를 누륵면 기본 재질로 돌아가요.

디자인 카테고리에서 계속하기

막다른 길이 아니라 이어지는 작업입니다.

전체 인덱스로 돌아가지 않고 다른 집중 워크스페이스로 바로 이동합니다.

CSS 로더 생성기

CSS Loader Generator

궤도 링이나 점 세 개 로딩 스피너를 크기, 굵기, 속도, 색상 제어로 디자인하고 reduced-motion을 존중하는 CSS를 복사합니다.

생성

CSS 체크박스 생성기

CSS Checkbox Generator

크기, 테두리, 상태 색상으로 커스텀 체크박스를 꾸미고, 키보드 접근이 가능한 실제 input을 유지하는 CSS를 복사합니다.

생성

CSS 스위치 생성기

CSS Switch Generator

트랙, 썸, 두 상태 색상을 갖춘 순수 CSS 토글 스위치를 만들고 포커스와 reduced-motion 처리를 포함한 코드를 복사합니다.

생성

CSS clip-path 생성기

CSS Clip Path Generator

드래그, 키보드 또는 좌표로 다각형을 편집하세요. 네 가지 프리셋에서 시작해 clip-path 선언이나 전체 CSS를 로컬에서 복사합니다.

생성