🌑
CSS box-shadow 생성기
슬라이더로 그림자를 조절하고 CSS 코드를 바로 복사하세요.
설정
0px
10px
30px
-8px
35%
CSS
box-shadow: 0px 10px 30px -8px rgba(236, 72, 153, 0.35);광고
박스 섀도 생성기는 그림자의 방향·흐림 정도·번짐·색상·투명도를 슬라이더로 조절하면서 실시간 미리보기와 함께 CSS box-shadow 코드를 만들어줍니다.
여러 겹 그림자로 입체감 내기
그림자를 한 겹만 쓰면 평면적으로 보일 수 있어, 가깝고 진한 그림자와 멀고 흐린 그림자를 겹쳐 쓰면 실제 조명 아래 있는 듯한 입체감을 표현할 수 있습니다.
자주 묻는 질문
생성된 코드는 바로 붙여넣기만 하면 되나요?
네, 만들어진 box-shadow 값을 대상 요소의 CSS에 그대로 복사해 붙여넣으면 미리보기와 동일한 그림자가 적용됩니다.
inset 그림자는 어떻게 만드나요?
안쪽 그림자(inset) 옵션을 켜면 요소 바깥이 아니라 안쪽으로 파인 듯한 그림자를 만들 수 있습니다.
광고
광고