그림자 만들기
그림자의 위치·번짐·색·투명도를 조절하면서 결과를 바로 보고 CSS 코드를 가져갑니다. 그림자를 여러 겹 쌓아 자연스러운 깊이를 만드는 프리셋도 있습니다.
🎨 계산은 전부 브라우저 안에서 끝납니다. 저장도 전송도 없습니다.
가로 위치0px
세로 위치8px
흐림20px
번짐-4px
투명도20%
box-shadow: 0px 8px 20px -4px rgba(15, 23, 42, 0.20);
자연스러운 그림자는 대개 아래로만 살짝 내려가고(가로 0), 색은 검정 대신 배경보다 조금 어두운 남색 계열을 옅게 씁니다. 순수한 검정 그림자는 탁해 보입니다.
이 도구로 할 수 있는 것
- 위치·흐림·번짐·색 조절
- 안쪽 그림자(inset) 지원
- 자연스러운 다중 그림자 프리셋
- CSS 코드 복사
자주 묻는 질문
Q. 그림자가 탁해 보입니다.
순수한 검정을 쓰면 그렇습니다. 배경보다 조금 어두운 남색 계열을 낮은 투명도로 쓰면 훨씬 자연스럽습니다.
Q. 프리셋은 왜 그림자가 여러 겹인가요?
실제 그림자는 물체와 가까운 쪽이 진하고 멀수록 옅게 퍼집니다. 한 겹으로는 그 느낌이 안 나서, 짧고 진한 그림자와 길고 옅은 그림자를 겹칩니다.
다른 색상 도구
화면마다 색 표현이 조금씩 달라, 같은 값도 기기에 따라 다르게 보일 수 있습니다.