개발자 / CSS
CSS 박스 그림자 생성기
오프셋, 블러, 스프레드, 색상, 불투명도, inset, 여러 레이어를 시각적으로 설정하고 프리셋과 실시간 미리보기로 CSS를 만든 다음 복사합니다.
CSS 박스 그림자 생성기: 각 레이어는 box-shadow 목록의 그림자 하나가 됩니다. 여기에는 가로 및 세로 오프셋, 블러 반경, 스프레드, 그리고 슬래시 뒤에 불투명도를 붙인 rgb() 색상이 포함됩니다. 레이어는 첫 번째 레이어가 위에 오도록 그려집니다. 미리보기 박스의 모서리 반경, 색상, 배경을 디자인에 맞게 변경할 수 있으며, 그림자는 실제 페이지에서처럼 모서리를 따라 표시됩니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.
- 카테고리
- 개발자 도구
- 실행 횟수
- 브라우저에서
- 비용
- 무료 · 가입 불필요
- 사용 가능 여부
- 사용 가능
브라우저에서 전부 실행됩니다
CSS
box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
값은 오른쪽 오프셋, 아래쪽 오프셋, 흐림, 확산 및 색상입니다. 여러 개의 얇은 레이어가 하나의 진한 그림자보다 자연스럽게 보이며, 나중 레이어는 이전 레이어 아래에 그려집니다.
프리셋
입체감
디자인 시스템은 그림자를 사용해 요소가 페이지에서 얼마나 떠 있는지 표현합니다. 기본 상태의 카드는 작고 선명한 그림자를 사용하고, 메뉴나 대화 상자는 더 크고 부드러운 그림자를 사용합니다. 곳곳에 서로 다른 그림자를 적용하기보다 몇 가지 고정된 수준을 유지하면 인터페이스가 일관된 느낌을 줍니다.
어두운 배경에서는 그림자가 거의 보이지 않습니다. 이때는 더 밝은 표면 색상이나 얇은 테두리로 같은 효과를 낼 수 있습니다. 버튼과 카드에는 그림자와 CSS gradient를 함께 사용하십시오.
그림자와 성능
큰 흐림 효과는 작은 흐림 효과보다 그리는 데 더 많은 비용이 들며, 그림자가 적용된 요소가 많이 동시에 스크롤되거나 애니메이션될 때 특히 중요합니다. 호버 시 그림자를 애니메이션하려면 매 프레임마다 box-shadow 자체를 변경하기보다, 의사 요소에 opacity를 적용해 더 강한 두 번째 그림자를 서서히 표시하는 편이 더 부드럽습니다.
사용 방법
- 프리셋으로 시작하거나 첫 번째 레이어의 오프셋, 블러, 스프레드, 불투명도를 조정합니다.
- 더 부드럽고 자연스러운 그림자를 만들려면 레이어를 추가하고, 박스 안쪽에 그림자를 넣으려면 inset을 선택합니다.
- box-shadow 선언을 복사합니다.
개인정보 보호 및 제한사항
모든 작업은 브라우저에서 실행됩니다. 마지막 그림자는 이 브라우저에만 저장됩니다.
관련 도구
자주 묻는 질문
box-shadow의 네 숫자는 무엇인가요?
가로 오프셋(양수이면 그림자가 오른쪽으로 이동), 세로 오프셋(양수이면 아래로 이동), 블러 반경(값이 클수록 부드러워지며 음수가 될 수 없음), 스프레드(양수이면 그림자가 박스보다 커지고 음수이면 작아짐)입니다. 색상은 마지막에 옵니다.
그림자를 자연스럽게 보이게 하려면 어떻게 하나요?
불투명도를 낮게 설정하고, 위에서 빛이 비추는 것처럼 그림자를 아래쪽으로 오프셋합니다. 박스 가까이에 작고 선명한 그림자 하나와 더 멀리 크고 부드러운 그림자 하나 이상을 함께 사용하십시오. 스프레드를 약간 음수로 설정하면 큰 블러가 양옆에 나타나는 것을 줄일 수 있습니다.
inset은 어떤 기능인가요?
그림자를 박스 바깥이 아니라 안쪽에 그립니다. 따라서 박스가 눌려 들어간 것처럼 보이며, 입력 필드와 눌린 버튼에 잘 어울립니다.
이미지에 그림자가 표시되지 않는 이유는 무엇인가요?
box-shadow는 이미지 내부의 모양이 아니라 요소의 박스 주위에 그려집니다. 투명한 PNG의 윤곽선에 그림자를 넣으려면 CSS filter의 drop-shadow()를 대신 사용하십시오.
무료 도구 · 브라우저에서회 실행 · 계정 불필요