생성기CSS 그림자 생성

CSS box-shadow 생성기그림자 코드 만들기

값을 움직여 CSS box-shadow 코드를 만드는 온라인 그림자 생성기입니다. 그림자를 여러 겹 쌓아 카드처럼 자연스러운 그림자를 만들고 바로 복사할 수 있습니다.

CSS 그림자 생성 사용법

값을 움직여 CSS box-shadow 코드를 만듭니다. 카드나 버튼에 얹을 그림자를 눈으로 보며 맞출 때 씁니다.

  1. 모양을 고르거나 값을 움직입니다

    자주 쓰는 모양을 눌러 시작한 뒤 가로·세로 거리, 번짐, 크기를 조절합니다.

  2. 겹을 더합니다

    그림자는 여러 겹을 쌓을 수 있습니다. 옅은 그림자 두세 겹을 겹치면 한 겹보다 자연스럽습니다.

  3. 코드를 복사합니다

    만들어진 box-shadow 선언을 그대로 복사해 씁니다.

자주 묻는 질문

번짐(blur)과 크기(spread)는 뭐가 다른가요?
번짐은 그림자 가장자리를 흐리게 하고, 크기는 그림자 자체를 키우거나 줄입니다. 크기를 음수로 주면 그림자가 요소보다 작아져 아래쪽만 살짝 뜨는 느낌을 냅니다.
inset 은 언제 쓰나요?
그림자를 요소 안쪽으로 넣습니다. 눌린 버튼이나 입력칸이 파여 보이게 할 때 씁니다.
그림자를 여러 겹 쌓으면 순서가 중요한가요?
중요합니다. 앞에 적은 그림자가 위에 그려집니다. 보통 좁고 진한 그림자를 앞에, 넓고 옅은 그림자를 뒤에 둡니다.

생성기 다른 도구