CSS box-shadow와 text-shadow를 시각적으로 생성하고 코드를 복사하세요
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);그림자 타입(box-shadow / text-shadow)을 선택하세요
각 레이어의 오프셋, 블러, 스프레드, 색상, 투명도를 조절하세요
레이어를 추가하거나 프리셋을 선택하세요
CSS 코드를 복사하여 프로젝트에 적용하세요
box-shadow는 요소의 프레임 주위에 그림자 효과를 추가하는 CSS 속성입니다. X/Y 오프셋, 블러, 스프레드, 색상을 설정할 수 있으며, inset 키워드로 안쪽 그림자도 만들 수 있습니다.
text-shadow는 텍스트 콘텐츠에 그림자를 추가하는 CSS 속성입니다. X/Y 오프셋과 블러를 설정할 수 있으며, 스프레드와 inset은 지원하지 않습니다.
네, CSS는 쉼표로 구분된 여러 그림자 값을 지원합니다. 여러 레이어를 조합하면 더 깊고 사실적인 그림자 효과를 만들 수 있습니다.
현대 웹 디자인에서 그림자는 요소에 깊이감과 계층감을 부여하는 핵심 도구입니다. 머티리얼 디자인(Material Design)은 요소의 높이(elevation)에 따라 그림자 강도를 달리하는 방식을 체계화했고, 뉴모피즘(Neumorphism) 트렌드는 밝고 어두운 두 그림자를 inset과 일반 형태로 조합해 돌출된 듯한 입체 UI를 표현합니다. 미니멀한 디자인에서는 매우 연한 그림자 하나만 써도 카드 구분 효과를 낼 수 있습니다.
CSS box-shadow는 쉼표로 구분해 여러 그림자를 한 번에 적용할 수 있습니다. 소프트한 대형 그림자와 선명한 소형 그림자를 겹치면 자연광처럼 사실적인 입체감을 만들 수 있습니다. 예를 들어 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.08) 같이 반경이 다른 두 그림자를 쌓으면 부드러우면서도 깊이 있는 효과를 얻습니다.
그림자를 사용할 때는 광원의 방향을 일관되게 유지하는 것이 중요합니다. 일반적으로 Y 오프셋을 양수(아래)로 설정해 위에서 빛이 내려오는 자연스러운 느낌을 줍니다. 색상은 순수 검정(#000000)보다 약간 채도가 있는 어두운 색을 낮은 투명도로 사용하면 더욱 자연스럽습니다. 모바일 기기에서는 성능 최적화를 위해 블러 반경을 과도하게 크게 설정하는 것은 피하는 것이 좋습니다.