작업 공간 준비 중…

입력

작업 공간 준비 중…

출력

결과가 여기에 표시됩니다.

사용 방법

박스 그림자는 카드를 배경에서 분리해 보이게 하거나 안쪽으로 들어간 표면을 표현할 수 있습니다. 몇 가지 값으로 효과를 조절하므로 이미지가 필요하지 않습니다.

그림자의 형태와 색상을 바꾸는 동안 미리보기에서 결과를 확인할 수 있습니다. 모서리 반경은 형태 비교용이며 복사하는 출력에 관련 없는 선언을 추가하지 않습니다.

가로·세로 오프셋은 요소를 기준으로 그림자를 이동합니다. 음수는 왼쪽이나 위쪽으로, 양수는 오른쪽이나 아래쪽으로 이동합니다.

흐림은 경계를 부드럽게 하며 음수를 사용할 수 없습니다. 확산은 흐림을 적용하기 전 그림자의 크기를 바꿉니다. 음수는 줄이고 양수는 넓힙니다.

예제

입력

0px 8px 24px 0px, black at 15%

결과

box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);

아래쪽 8px 오프셋, 24px 흐림과 15% 검정을 사용한 외부 그림자입니다.

색상 선택기로 그림자 색상을 정하고 불투명도로 알파 값을 조절합니다. 불투명도가 낮으면 뒤의 페이지 배경이 더 많이 비칩니다.

내부 그림자는 그림자를 상자 안쪽에 그립니다. 한 번에 하나의 그림자를 생성하며 여러 겹의 그림자는 스타일시트에서 쉼표로 구분해 작성해야 합니다.

CSS 복사는 box-shadow:만 출력합니다. 미리보기처럼 둥근 형태가 필요하면 요소에 border-radius를 별도로 지정하세요.

처리 한도

텍스트 입력 한도는 1 MiB입니다. CSS 및 HTML 변환은 워커에서 실행되며 제한 시간은 30초입니다. 색상 도구는 sRGB를 사용하며, 생성된 스타일은 미리 보기이므로 실제 레이아웃에서 테스트해야 합니다.

미리보기의 모서리 반경도 CSS에 포함되나요?

아니요. 모서리 반경은 미리보기에만 적용됩니다. 실제 요소에는 border-radius 선언을 별도로 추가하세요.

흐림과 확산은 어떻게 다른가요?

흐림은 그림자 경계를 부드럽게 만듭니다. 확산은 그 흐림이 적용되기 전 그림자 영역을 넓히거나 줄입니다.

확산에 음수를 사용할 수 있나요?

네. 음수 확산은 그림자를 줄입니다. 흐림 값은 0 이상이어야 합니다.

안쪽 그림자를 만들 수 있나요?

네. 내부 그림자를 켜면 복사되는 선언에 inset 키워드가 포함됩니다.

여러 겹의 그림자도 생성하나요?

아니요. 한 개의 그림자를 생성합니다. 복사한 값에 다른 그림자 값을 쉼표로 연결하여 여러 겹으로 만들 수 있습니다.