CSS 그림자·유리효과 생성기 사용법
- 위쪽 탭에서 "박스 그림자" 또는 "유리 효과"를 고릅니다.
- 슬라이더를 움직이면 미리보기가 바로 바뀌고, 아래 상자에 CSS 코드가 자동으로 만들어집니다.
- 마음에 들면 "CSS 복사"를 눌러 내 스타일시트에 붙여 넣습니다.
박스 그림자 탭에서는 그림자를 최대 5겹까지 쌓을 수 있습니다. 프리셋으로 시작한 뒤 겹마다 값을 조금씩 바꿔 보세요.
box-shadow 값의 의미
box-shadow는 "가로 위치 세로 위치 흐림 퍼짐 색" 순서로 씁니다. 가로·세로 위치는 그림자를 얼마나 옮길지, 흐림은 가장자리를 얼마나 번지게 할지, 퍼짐은 그림자 크기 자체를 키우거나(양수) 줄일지(음수)를 정합니다. 예를 들어 0 10px 30px -5px rgba(0, 0, 0, 0.25)는 아래쪽으로 10px 치우친 넓고 부드러운 그림자이고, 퍼짐이 -5px이라 상자보다 살짝 작게 깔려 가장자리가 깔끔합니다. 값 앞에 inset을 붙이면 그림자가 상자 안쪽에 생겨 눌린 듯한 느낌이 납니다. 흐림은 음수가 될 수 없습니다.
유리 효과(Glassmorphism)는 이렇게 만듭니다
유리 효과는 세 가지로 이루어집니다. 첫째, 반투명한 배경색(예: 흰색 22% 투명도)입니다. 둘째, backdrop-filter: blur()로 상자 뒤쪽 화면을 흐리게 만드는 것입니다. 셋째, 얇고 밝은 테두리로 유리 모서리의 반사를 흉내 내는 것입니다. 이 도구는 saturate 값도 함께 조절해 뒤쪽 색이 탁해 보이지 않게 합니다. 사파리 일부 버전을 위해 -webkit-backdrop-filter도 같이 만들어 줍니다. 효과를 제대로 보려면 상자 뒤에 색이 있는 배경이나 이미지가 있어야 합니다. 단색 배경 위에서는 흐릴 대상이 없어 일반 반투명 상자처럼 보입니다.
알아둘 점
- 유리 효과 위의 글자는 배경에 따라 읽기 어려워질 수 있습니다. 본문 글자는 대비 4.5:1 이상을 권장하므로 색상 대비 체크기로 확인해 보세요.
- 흐림 값이 큰 backdrop-filter를 한 화면에 여러 개 쓰면 저사양 기기에서 스크롤이 버벅일 수 있습니다. 꼭 필요한 곳에만 쓰세요.
- 네오모피즘처럼 대비가 낮은 스타일은 버튼 경계가 잘 보이지 않아 접근성이 떨어질 수 있습니다.
- backdrop-filter를 지원하지 않는 환경을 위해 @supports not (backdrop-filter: blur(1px)) 안에 더 불투명한 배경을 지정해 두면 안전합니다.
자주 묻는 질문
그림자가 화면에 보이지 않아요.
그림자 색의 투명도가 0이거나 그림자 색이 배경색과 같으면 보이지 않습니다. 흐림과 퍼짐 값이 모두 0이고 위치도 0이면 상자 뒤에 완전히 가려지는 것도 원인입니다. 투명도를 올리고 세로 위치를 조금 주면 바로 확인할 수 있습니다.
backdrop-filter가 적용되지 않아요.
요소 자체의 배경이 반투명이어야 뒤쪽 흐림이 보입니다. 배경색을 완전 불투명으로 두면 효과가 보이지 않습니다. 일부 구형 브라우저는 지원하지 않으므로 지원하지 않을 때를 위해 배경 투명도를 조금 높인 대체 스타일을 함께 두는 것이 좋습니다.
여러 겹의 그림자는 어떤 순서로 쌓이나요?
쉼표로 이어진 box-shadow에서는 앞에 적은 그림자가 위에 그려집니다. 그래서 선명하고 작은 그림자를 앞에, 넓고 흐린 그림자를 뒤에 적으면 자연스러운 입체감이 납니다.
주의사항
이 도구는 스타일 코드를 만들어 주는 참고용 도구입니다. 실제 사이트에 적용할 때는 여러 브라우저와 기기에서 보이는 모양과 속도를 직접 확인해 주세요.