Box-Shadow / Border-Radius 생성기 (CSS 시각화 도구)

Box-Shadow / Border-Radius 생성기 (CSS 시각화 도구)

CSS를 직접 타이핑하지 않아도 슬라이더 하나로 그림자와 둥근 모서리를 실시간으로 설계할 수 있는 웹 도구입니다.

값을 조절하는 즉시 미리보기가 반영되고, 완성된 CSS 코드를 한 번에 복사할 수 있어 실무에 바로 활용할 수 있습니다.

Box-Shadow · Border-Radius 생성기

 

값 조절하면 즉시 미리보기와 CSS 코드가 만들어집니다. (복사/랜덤/초기화 포함)

Box-shadow

X / Y

0px

16px

Blur / Spread

30px

0px

색상 / 투명도

18%

알파값은 RGBA로 반영됩니다.

Inset

inset

안쪽 그림자

 

Border-radius

모드

통합: 한 값으로 4개 모두 적용 / 개별: 모서리별로 따로

Radius

18px

각 모서리

TL 18px

TR 18px

BR 18px

BL 18px

미리보기 배경

박스 배경색

미리보기

Preview Box

shadow / radius 미리보기

CSS 코드

아래 코드를 그대로 복사해서 사용하세요.

 

주요 기능

그림자 (Box-shadow) 세부 조절

X·Y 오프셋으로 그림자 방향을 잡고, Blur로 번짐 정도, Spread로 확산 범위를 조절합니다. 색상 피커와 투명도(Alpha) 슬라이더로 색과 강도를 세밀하게 설정하고, Inset 옵션으로 바깥 그림자와 안쪽 그림자를 전환할 수 있습니다.

테두리 둥글기 (Border-radius) 세부 조절

통합 모드에서는 슬라이더 하나로 4개 모서리를 동시에 조절하고, 개별 모드에서는 TL·TR·BR·BL 각 모서리를 따로 지정할 수 있습니다.

편의 기능 3가지

• 랜덤 — 무작위 디자인을 즉시 제안해 줍니다. 아이디어가 막힐 때 유용합니다.
• 초기화 — 모든 값을 기본값으로 되돌립니다.
• 복사 — 생성된 CSS 코드를 클립보드에 한 번에 복사합니다.

기술적 특징

• HTML · CSS · JavaScript 한 파일로 구성된 단독 실행 구조입니다.
• jQuery 등 외부 라이브러리 없이 순수 Vanilla JS로 동작해 가볍고 의존성이 없습니다.
• @media 쿼리가 적용되어 모바일에서도 레이아웃이 정상 동작합니다.

상황별 실무 활용 예시

상황	활용 방법
카드 UI 그림자를 빠르게 잡고 싶을 때	슬라이더로 조절 → 복사 → 바로 적용
모서리 둥글기를 수치로 가늠하기 어려울 때	미리보기 보며 감각으로 결정
여러 디자인 시안을 비교할 때	랜덤 버튼으로 빠르게 후보 탐색

CSS box-shadow는 값이 5~6개가 한 줄에 들어가다 보니 직접 작성하면 실수가 잦습니다. 이 도구를 사용하면 눈으로 확인하면서 정확한 코드를 얻을 수 있어 작업 속도가 크게 빨라집니다.