CSS 그림자 생성기 (box-shadow)
오프셋·블러·확산·색상·투명도를 조절해 CSS box-shadow 코드를 만들고 실시간 미리보기로 확인합니다. inset 안쪽 그림자를 지원하며 모든 처리는 브라우저에서만 이루어집니다.
- CSS
- box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
자주 묻는 질문
각 값은 무엇을 의미하나요?
가로/세로 오프셋은 그림자의 위치, 블러는 흐림 정도, 확산(spread)은 그림자의 크기 확대/축소입니다. 확산에 음수를 주면 그림자가 요소보다 작아져 자연스러운 카드 그림자를 만들 수 있습니다.
여러 겹 그림자는 어떻게 만드나요?
box-shadow는 쉼표로 여러 그림자를 나열할 수 있습니다. 이 도구로 각 겹을 만들어 '0 1px 2px …, 0 8px 24px …'처럼 이어 붙이면 더 입체적인 그림자가 됩니다.
inset은 언제 쓰나요?
inset은 그림자를 요소 안쪽에 그립니다. 눌린 버튼, 오목한 입력창, 내부 하이라이트 표현에 사용합니다.
관련 도구
텍스트와 배경 색상의 대비율을 계산하고 WCAG 2.x AA·AAA 접근성 기준 통과 여부를 판정합니다. 웹 접근성 점검에 유용하며 모든 계산은 브라우저에서만 이루어집니다.
기준 색상에서 밝은 톤과 어두운 톤의 HEX 팔레트를 생성합니다. 디자인 시스템의 색 단계를 만들 때 유용하며 모든 처리는 브라우저에서만 이루어집니다.
px·rem·em·pt·% 를 기준 폰트 크기에 맞춰 상호 변환합니다. 반응형 타이포그래피 작업에 유용하며 모든 계산은 브라우저에서만 이루어집니다.
HEX, RGB, HSL 색상 코드를 상호 변환하고 미리보기로 확인합니다.
최소·최대 크기와 뷰포트 범위로 반응형 clamp() 코드를 만듭니다. 미디어쿼리 없이 폰트 크기가 화면 폭에 따라 부드럽게 변하는 fluid typography에 사용합니다. 모든 계산은 브라우저에서만 이루어집니다.
CSS에서 주석과 불필요한 공백을 제거해 파일 크기를 줄입니다. 문자열 값은 보존하며 모든 처리는 브라우저에서만 이루어집니다.