CSS 그림자 생성기
실시간 미리보기로 CSS box-shadow 생성.
X 오프셋4px
Y 이산4px
미묘한12px
퍼져 나가는 것0px
불투명도15%
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.15);CSS 그림자에 대해
CSS box-shadow는 네 가지 값으로 정의됩니다: 수평 오프셋(X), 수직 오프셋(Y), 블러(부드러움), 스프레드(크기). 선택적 색상과 'inset' 키워드를 통해 내부 그림자를 정의할 수 있습니다.
쉼표로 구분하여 같은 요소에 여러 그림자를 적용할 수 있으며, 이를 통해 깊이감과 입체적인 효과를 만들 수 있습니다. 하지만 성능상의 이유로 매우 큰 블러 값이 있는 과도한 그림자는 피하는 것이 좋습니다.
자주 묻는 질문
inset 속성이란 무엇인가요?
inset은 외부 그림자를 내부 그림자로 변환합니다. 깊이감 효과, 움푹 들어간 텍스트 필드, 눌린 버튼 효과를 만드는 데 유용합니다.
그림자가 성능에 영향을 미치나요?
간단한 그림자는 최소한의 영향만 미칩니다. 그러나 많은 요소에 매우 높은 blur 값을 가진 그림자는 느린 기기에서 성능에 영향을 줄 수 있습니다. 적절히 사용하세요.
여러 개의 그림자를 사용할 수 있나요?
네, 쉼표로 구분하세요: box-shadow: 2px 2px 5px rgba(0,0,0,0.1), 0 0 20px rgba(0,0,0,0.05). 이렇게 하면 더 사실적이고 세련된 효과를 만들 수 있습니다.
더 알고 싶으신가요? 전체 가이드 읽기 →