Box Shadow 생성기

슬라이더를 드래그하여 박스 그림자를 만들고, 레이어를 쌓아 깊이감을 더한 뒤 완성된 CSS를 즉시 복사해 보세요.

그림자 레이어
레이어 1
CSS
슬라이더를 조절하여 그림자를 디자인해 보세요.

모든 그림자는 브라우저에서 직접 렌더링됩니다. 설정한 어떤 데이터도 BroBroGo 서버로 전송되지 않습니다.

자주 묻는 질문

오프셋, 흐림, 확산은 각각 무엇을 조절하나요?

오프셋(Offset)은 그림자를 가로/세로 방향으로 이동시키고, 흐림(Blur)은 가장자리를 부드럽게 만들며, 확산(Spread)은 흐려지기 전에 그림자의 크기를 키우거나 줄입니다. 음수 확산 값을 사용하면 그림자가 안쪽으로 모여 밀착된 느낌을 줄 수 있습니다.

inset 옵션은 어떤 역할을 하나요?

일반적인 그림자는 떠 있는 카드 뒤의 빛처럼 요소 바깥쪽에 드리워집니다. 반면 Inset 옵션은 그림자를 안쪽으로 뒤집어 요소가 푹 들어간 것처럼 보이게 만듭니다. 안으로 들어간 입력창이나 눌린 버튼을 표현할 때 유용합니다.

그림자 레이어를 여러 개 쌓는 이유는 무엇인가요?

단일 그림자는 일정 크기를 넘어가면 평평하고 부자연스러워 보입니다. 실제 입체감은 보통 좁고 어두운 그림자와 넓고 부드러운 그림자를 조합하여 만들어집니다. 두 번째 레이어를 추가하고 각각 독립적으로 조절하여 깊이감 있는 효과를 연출해 보세요.

CSS Cubic Bezier 생성기두 핸들을 드래그하여 이징 곡선을 만들고, 등속 운동과 비교하는 실시간 애니메이션을 확인한 뒤 cubic-bezier() 값을 복사해 보세요.그라데이션 생성기선형, 방사형 또는 원추형 그라데이션을 만들고, 색상 중단점을 추가하고 방향을 설정하여 클릭 한 번으로 CSS를 복사해 보세요.Border Radius 생성기슬라이더로 각 모서리를 둥글게 깎고, 타원형 모드로 유기적인 물방울 모양을 디자인하여 CSS를 즉시 복사해 보세요.Flexbox 생성기시각적 컨트롤러로 flex 컨테이너와 아이템을 구성하고, 실시간으로 반응하는 레이아웃을 확인한 뒤 클릭 한 번으로 CSS를 복사해 보세요.CSS Grid 생성기열과 행을 설정하고, 셀 위를 드래그하여 아이템을 배치한 뒤, 클릭 한 번으로 그리드 CSS와 매칭되는 HTML 코드를 복사해 보세요.CSS clamp() 계산기소형 및 대형 화면에서의 크기를 입력하면 그 사이에서 부드럽게 변하는 유동적인 clamp() 값을 생성해 줍니다. 글자 크기, 패딩, 마진, 갭 등에 활용해 보세요.색상 변환기HEX, RGB, HSL, HSV, CMYK, LAB 간 색상 변환 — 한 필드를 수정하면 나머지도 실시간으로 자동 업데이트됩니다.CSS 정렬 및 압축기지저분한 CSS의 들여쓰기를 정리하여 가독성을 높이거나, 규칙 순서를 변경하지 않는 안전 모드로 코드를 압축하여 배포해 보세요.웹 접근성 명도 대비 검사기텍스트 색상과 배경 색상을 입력하여 WCAG 명도 대비 비율과 AA/AAA 통과 여부를 실시간으로 확인해 보세요.