여러 겹의 CSS 박스 그림자를 만들고 밝고 어두운 배경의 서비스 및 가격 카드에서 포커스 표시까지 확인하세요. CSS와 바로 사용할 카드 구성 요소를 복사할 수 있습니다.
회색 사각형만 보고 그림자가 적절한지 판단하기는 어렵습니다. 여기서는 레이어가 있는 box-shadow를 조정하고 밝거나 어두운 페이지의 서비스 카드와 가격 카드에서 확인할 수 있습니다. Tab 키로 테스트할 수 있는 키보드 포커스 표시도 포함됩니다. 결과가 마음에 들면 CSS 또는 카드 구성 요소 전체를 복사하세요. 모든 기능은 브라우저에서 실행됩니다. 입력한 내용은 We.Inc나 다른 곳으로 전송되지 않으며 탭을 닫으면 사라집니다.
프리셋을 선택하거나 첫 번째 레이어의 가로·세로 오프셋, 흐림, 확산, 색상, 불투명도, 내부 그림자를 조정하세요.
레이어를 최대 5개까지 추가할 수 있습니다. 촘촘한 그림자와 넓고 부드러운 그림자를 겹치면 큰 그림자 하나보다 자연스럽습니다.
밝은 페이지와 어두운 페이지 미리보기를 전환하세요. Tab 키를 눌러 카드 버튼에 포커스를 이동하고 포커스 표시가 계속 보이는지 확인하세요.
선택한 배경에서 그림자가 너무 희미하거나 카드 텍스트의 대비가 WCAG AA 기준보다 낮으면 검사 결과에 경고가 표시됩니다.
box-shadow 선언 또는 HTML과 CSS가 포함된 카드 구성 요소 전체를 복사하세요.
어두운 배경에서는 그림자가 거의 보이지 않습니다. 대신 카드 색상을 조금 밝게 하거나 얇은 테두리로 카드를 구분하세요.
부드러운 느낌을 내려면 순수한 검은색보다 배경색에 가까운 색조를 그림자에 사용하세요.
포커스를 표시할 때 그림자에만 의존하지 마세요. 눈에 잘 띄는 윤곽선도 사용하세요.
흐림 값이 크면 그리는 데 더 많은 비용이 듭니다. 긴 목록에서 큰 흐림 효과를 애니메이션으로 적용하지 마세요.
사이트 전체에서 그림자 단계를 한두 가지로 통일해 깊이 표현이 의미를 갖게 하세요.
자주 묻는 질문
CSS box-shadow 속성은 어떻게 작동하나요?
box-shadow는 가로 오프셋, 세로 오프셋, 선택 사항인 흐림 반경, 선택 사항인 확산 값, 색상을 받으며 내부 그림자에는 inset 키워드를 사용합니다. 쉼표로 구분해 그림자를 여러 개 지정할 수 있고 첫 번째 그림자가 가장 위에 그려집니다.
레이어 그림자가 더 자연스러운 이유는 무엇인가요?
실제 물체는 가까이에 선명한 그림자를, 더 멀리 넓고 부드러운 그림자를 만듭니다. 흐림을 키우고 불투명도를 낮춘 레이어 두세 개로 이런 효과를 흉내 낼 수 있습니다.
어두운 배경에서 그림자가 보이지 않는 이유는 무엇인가요?
어두운 페이지에서는 어두운 그림자의 대비가 거의 없습니다. 이 도구는 이 문제를 경고합니다. 대신 밝은 표면 색상이나 은은한 테두리로 카드를 띄워 보이게 하세요.
box-shadow는 접근성에 영향을 주나요?
그림자는 장식이므로 자체적으로 대비 규칙을 충족할 필요는 없습니다. 중요한 것은 카드 위의 텍스트가 읽기 쉽고 포커스가 그림자 변화만이 아니라 보이는 윤곽선으로 표시되는 것입니다.
CSS 그림자 생성기는 무료인가요?
네. 가입 없이 무료로 사용할 수 있습니다. 코드를 복사해 어떤 프로젝트에서든 사용하세요.
실제 배포할 구성 요소에서 그림자를 테스트하세요
단독 사각형에서는 적절해 보이는 그림자도 가격 카드가 나란히 있으면 무거워 보이거나 사진 아래에서 사라질 수 있습니다. 소규모 비즈니스 사이트에서 실제로 쓰는 아이콘이 있는 서비스 카드와 강조된 가격 플랜 카드에서 미리 보면 실제 결과를 확인할 수 있습니다.
구성 요소 코드에는 키보드로 어떤 그림자를 선택해도 카드를 사용할 수 있도록 focus-visible 윤곽선이 포함됩니다.