CSS 그림자 및 글래스모피즘 생성기

이 도구는 CSS 그림자와 반투명 유리 효과를 슬라이더로 조절하고, 오른쪽 카드에서 실시간으로 미리 보면서 프로젝트에 바로 붙여 넣을 수 있는 CSS를 만들어 줍니다. ‘Box Shadow’ 탭에서는 그림자 레이어마다 가로·세로 오프셋(-50~50px), 흐림 반경(0~100px), 퍼짐 반경(-30~50px), 색상과 불투명도를 설정할 수 있고, Inset을 체크하면 안쪽 그림자가 됩니다. 기본 출력은 box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.30);이며 색상은 rgba 형식으로 출력됩니다.

‘그림자 레이어 추가’를 누르면 여러 그림자를 겹칠 수 있고, 출력에서는 쉼표로 연결됩니다. 목록에서 앞에 있는 레이어일수록 위에 그려집니다. 자연스러운 그림자는 보통 ‘가깝고 선명한 그림자’와 ‘멀고 부드러운 그림자’의 조합이라, 내장된 3D Double 템플릿도 0 5px 5px와 0 20px 25px의 옅은 검은 그림자 두 겹으로 하나의 큰 그림자보다 자연스럽게 보이게 합니다. 퍼짐 값을 음수로 하면 그림자가 요소보다 작아져 카드 아래의 부드러운 그림자에 자주 쓰이고, Glow Light 템플릿은 브랜드 색상, 오프셋 0, 큰 흐림 값으로 빛나는 효과를 냅니다.

‘Glassmorphism’ 탭에서는 반투명 유리 카드를 만들 수 있습니다. 배경 흐림(backdrop-filter: blur, 0~40px), 배경색과 불투명도, 1px 테두리의 색상과 불투명도를 조절합니다. 생성되는 CSS에는 backdrop-filter와 Safari에 필요한 -webkit-backdrop-filter가 모두 들어 있습니다. 이 효과의 핵심은 ‘배경이 반투명하고 그 뒤에 무언가가 있어야 한다’는 점입니다. 단색 위에서는 흐릴 대상이 없어 차이가 보이지 않으므로, 미리보기에서 그라데이션과 어두운 배경을 바꿔 가며 비교할 수 있습니다.

실제로 쓸 때 주의할 점도 있습니다. 넓은 영역에 backdrop-filter를 적용하면 저사양 휴대폰에서 성능 부담이 커지므로 몇 개의 카드나 내비게이션 바에만 쓰는 것이 좋습니다. 반투명 배경 위 텍스트는 대비에 신경 쓰고, 배경 불투명도가 낮다면 색을 진하게 하거나 글자를 굵게 하세요. rgba 값은 CSS 사용자 정의 속성이나 Tailwind 임의 값 문법에 그대로 쓸 수 있습니다. 모든 작업은 브라우저에서 이루어지며 가입이 필요 없습니다.