CSS box-shadow 생성기 사용법: 그림자 코드를 입력값으로 만들기

Q: 내부 그림자는 어떻게 설정하나요?

내부 그림자가 필요할 때 inset 선택 상자를 켜면 결과 선언에 inset 이 추가됩니다. 선택하지 않은 경우에는 확인된 선언 형식에 inset 이 추가되지 않습니다.

가로·세로 이동값, 흐림, 퍼짐, 색상과 inset 여부를 지정하면 CSS box-shadow 선언을 만들 수 있습니다.

CSS 그림자 설정을 코드로 만드는 방법

CSS에서 box-shadow를 직접 작성할 때는 그림자의 위치, 흐림 정도, 퍼짐 정도, 색상을 한 선언 안에 올바른 순서로 배치해야 합니다. 이 생성기는 이런 값을 입력해 CSS 그림자 선언을 만드는 데 사용할 수 있습니다. 가로 이동값과 세로 이동값은 그림자가 요소에서 어느 방향으로 떨어져 보일지 정하는 값이고, 흐림 정도는 가장자리의 번짐을 조정하는 값입니다. 퍼짐 정도는 그림자의 영역을 넓히거나 줄이는 값으로 사용할 수 있습니다.

색상 입력과 inset 선택도 함께 제공됩니다. 색상은 그림자의 시각적 농도와 분위기에 영향을 주므로 배경색과 글자색을 고려해 지정하는 편이 좋습니다. inset을 선택하지 않으면 일반적인 바깥쪽 그림자 형태로 사용할 수 있고, 선택하면 요소 안쪽에 표시되는 그림자 선언을 만들 수 있습니다. 카드, 버튼, 입력 영역, 패널처럼 경계를 시각적으로 구분해야 하는 요소에 적용할 CSS를 준비할 때 입력값을 조금씩 바꾸며 결과 형태를 비교하기 좋습니다.

숫자 입력을 생략할 수도 있습니다. 확인된 기본값은 가로 이동 2, 세로 이동 2, 흐림 5, 퍼짐 0이며, 색상의 기본값은 #00000033입니다. 따라서 빠르게 기본 형태를 확인할 때는 값을 비워 둔 채 생성하고, 원하는 디자인에 맞춰 바꿀 때는 각 입력란을 구분해 수정하면 됩니다. 이 도구는 CSS 선언을 만들어 주므로 실제 페이지에서 그림자가 적절하게 보이는지는 적용할 요소의 크기, 배경, 주변 여백과 함께 확인해야 합니다.

입력하고 CSS 선언 받기

생성기의 입력 영역에서 가로 이동값과 세로 이동값을 정합니다. 가로 값은 좌우 방향의 이동을, 세로 값은 위아래 방향의 이동을 나타내는 값으로 CSS 선언에 들어갑니다. 그림자가 어느 쪽으로 치우쳐 보이게 할지 생각한 뒤 숫자를 입력하세요.
흐림 정도를 입력합니다. 값은 결과 선언의 세 번째 숫자 위치에 들어가며, 네 숫자 값 가운데 흐림에 해당합니다. 이어서 퍼짐 정도를 입력합니다. 퍼짐 값은 네 번째 숫자 위치에 들어갑니다. 입력하지 않은 숫자 항목은 가로 2, 세로 2, 흐림 5, 퍼짐 0으로 처리됩니다. 특정 값이 필요하다면 빈칸에 맡기지 말고 해당 항목을 직접 입력하는 편이 좋습니다.
색상 입력란에 사용할 색상 값을 입력합니다. 별도 색상을 지정하지 않으면 확인된 기본 색상 #00000033이 사용됩니다. 색상을 바꿀 때는 그림자를 적용할 배경 위에서 충분히 구분되는지 결과를 확인할 수 있도록 값을 선택하세요. 이 안내에서 확인된 기능은 색상 입력을 받아 선언에 넣는 동작이며, 색상 문법의 허용 범위나 별도 변환 규칙까지 설명하지는 않습니다.
그림자를 요소 안쪽에 넣으려면 inset 선택 상자를 켭니다. 바깥쪽 그림자로 만들려면 선택하지 않은 상태로 둡니다. 선택 여부는 결과 선언에 직접 반영되므로, 생성하기 전에 의도한 방향을 다시 살펴보세요.
입력을 마친 뒤 생성 동작을 실행합니다. 결과에는 입력한 가로 이동, 세로 이동, 흐림, 퍼짐, 색상이 들어간 box-shadow 선언이 표시됩니다. 네 숫자 값에는 px가 붙고, inset을 켠 경우에는 선언에 inset이 추가됩니다.
결과를 CSS 규칙의 box-shadow 속성에 넣기 전에 숫자의 순서를 확인합니다. 가로 이동, 세로 이동, 흐림, 퍼짐이 서로 바뀌면 그림자의 위치와 가장자리 느낌이 달라질 수 있습니다. 색상이 의도한 값인지, inset을 실수로 선택하지 않았는지도 함께 살펴보세요. 결과를 적용한 뒤에는 대상 요소의 실제 배경에서 모양을 확인하고 필요한 입력만 다시 조정하면 됩니다.
그림자 없이 흐림이나 이동을 조정하는 형태를 확인하려면 오프셋, 흐림, 퍼짐에 0을 입력해 볼 수 있습니다. 오프셋 두 개와 흐림, 퍼짐을 0으로 입력한 조합은 확인된 계산 경로에서 성공적으로 처리됩니다. 다른 숫자 범위나 오류 처리 방식은 별도로 확인된 내용이 아니므로, 결과를 받은 뒤 CSS에 적용하기 전에 입력과 선언의 형태를 직접 점검하세요.

결과를 읽고 적용하기

생성된 결과는 CSS의 box-shadow 속성에 사용할 수 있는 선언 형태입니다. 네 숫자는 입력한 순서에 따라 가로 이동, 세로 이동, 흐림, 퍼짐을 나타내며, 각각의 숫자 뒤에는 px가 붙습니다. 색상은 입력한 값이 선언에 들어가고, inset을 선택했다면 내부 그림자를 나타내는 키워드가 함께 포함됩니다. 따라서 결과를 읽을 때는 숫자를 하나의 길이값으로 뭉뚱그리지 말고 네 위치를 차례로 확인하는 것이 좋습니다.

예를 들어 첫 번째 숫자가 생각보다 크면 그림자가 좌우로 이동하는 정도가 달라질 수 있고, 두 번째 숫자가 크면 위아래 방향의 위치가 달라질 수 있습니다. 세 번째 숫자는 흐림과 관련된 자리이고, 네 번째 숫자는 퍼짐과 관련된 자리입니다. 이 순서를 확인하면 값을 수정할 때 어떤 입력란을 다시 열어야 하는지 판단하기 쉽습니다. 색상이 너무 진하거나 배경과 충분히 구분되지 않는다면 색상 입력을 조정하고 선언을 다시 생성하세요.

inset은 숫자를 바꾸는 옵션이 아니라 결과에 내부 그림자 키워드를 추가하는 선택입니다. 바깥쪽 윤곽을 기대하면서 선택 상자를 켜면 결과의 용도가 달라질 수 있으므로, 카드 안쪽 경계처럼 내부 효과가 필요한 경우에만 사용하세요. 반대로 요소 바깥에 떨어지는 그림자를 원한다면 선택하지 않은 결과를 사용합니다.

확인된 계산 경로에서는 성공 결과가 반환되며, 0을 포함한 특정 입력 조합도 성공적으로 처리됩니다. 그러나 이 사실만으로 다른 숫자 범위, 색상 표기 방식, 반올림, 오류 표시 또는 출력 제한까지 판단할 수는 없습니다. 결과가 만들어졌다는 점과 실제 디자인에서 보기 좋은 그림자라는 판단은 구분해야 합니다. CSS 규칙에 붙여 넣은 뒤에는 적용 대상의 배경과 크기, 주변 요소와의 간격을 확인하고 필요할 때 값을 다시 생성하세요.

최종 결과를 검토할 때는 세 가지를 순서대로 살피면 됩니다. 먼저 네 숫자가 입력 의도와 같은 순서인지 확인합니다. 다음으로 색상 값이 예상한 색상인지 봅니다. 마지막으로 inset 선택 상태와 결과의 키워드가 서로 일치하는지 확인합니다. 이 검토를 거치면 기본값이 의도하지 않게 남았거나 내부 그림자 옵션이 잘못 적용된 상황을 줄일 수 있습니다.

사용 예시

카드 안쪽에 그림자를 적용하려고 오프셋과 퍼짐을 조정한 뒤 생성된 CSS 선언의 형태를 확인합니다.

가로 이동 0, 세로 이동 4, 흐림 8, 퍼짐 0, 색상 #00000033을 입력하고 inset을 켠 뒤 생성합니다.

생성 결과는 box-shadow 선언 형태이며, 입력한 네 숫자 값 뒤에 px가 붙고 inset을 선택하면 해당 키워드가 포함됩니다.

제한 사항

확인된 기능 설명에는 숫자 입력의 허용 범위, 색상 문법, 반올림 방식, 오류 처리 및 출력 제한이 포함되어 있지 않습니다.

자주 발생하는 오류

원하는 숫자를 입력하지 않은 채 생성하면 해당 항목에 기본값이 사용될 수 있습니다. 특정 수치가 필요하다면 가로 이동, 세로 이동, 흐림, 퍼짐 입력란을 각각 확인하고 값을 직접 입력한 뒤 다시 생성하세요.

자주 묻는 질문

입력값을 생략하면 어떻게 되나요?

숫자 입력을 비워 두면 확인된 기본값인 가로 2, 세로 2, 흐림 5, 퍼짐 0이 사용됩니다. 다른 수치를 원하면 해당 입력란에 직접 값을 넣어야 합니다.

내부 그림자는 어떻게 설정하나요?

내부 그림자가 필요할 때 inset 선택 상자를 켜면 결과 선언에 inset이 추가됩니다. 선택하지 않은 경우에는 확인된 선언 형식에 inset이 추가되지 않습니다.

그림자 값을 0으로 설정할 수 있나요?

오프셋, 흐림, 퍼짐에 0을 입력한 조합은 확인된 계산 경로에서 성공적으로 처리됩니다. 다만 다른 숫자 범위나 오류 처리 방식까지 이 결과만으로 판단할 수는 없습니다.