🌑 Box Shadow 생성기

box-shadow 및 text-shadow CSS 코드를 시각적으로 생성합니다.

모드
X 이동4px
Y 이동6px
흐림 (Blur)12px
퍼짐 (Spread)0px
투명도30%
프리셋
Box
CSS 코드 (클릭하여 복사)

📖 사용방법

  1. 수평/수직 오프셋, 블러, 스프레드, 색상을 슬라이더로 조정합니다.
  2. 프리셋 버튼으로 네온, 뉴모피즘, 카드 등 자주 쓰는 스타일을 빠르게 적용합니다.
  3. 여러 레이어의 그림자를 쌓아 복잡한 효과를 만들 수 있습니다.
  4. 생성된 CSS 코드를 복사해서 바로 사용합니다.

🌑 Box Shadow 생성기 실제 사용 예시

입력
x 0, y 8, blur 24, alpha 0.15
예상 결과
box-shadow CSS와 미리보기 생성
확인 사항
어두운 배경에서는 그림자 가시성이 달라짐

처리 방식

색상 값과 선택한 이미지는 현재 브라우저의 Canvas·색상 계산 기능으로 처리합니다.

🌑 Box Shadow 생성기 사용 가이드

CSS box-shadow를 시각적으로 조정해서 코드를 생성합니다. 네온 효과, 뉴모피즘 등 프리셋 제공.

권장 사용 순서

  1. 웹 디자인에 사용할 색이라면 배경색과 글자색을 함께 정하고 HEX, RGB, HSL 값을 디자인 시스템에 기록하세요.

결과 확인 방법

밝은 화면과 어두운 화면, 모바일 기기에서도 확인하고 글자색은 WCAG 대비 결과까지 함께 점검하세요.

처리 범위와 제한사항

모니터, 브라우저와 색상 프로필에 따라 실제 표시색이 달라질 수 있습니다. 인쇄물은 별도의 CMYK 교정 과정이 필요합니다.

기능 및 설명 검토: FreeTools 운영팀 · 2026-07-31

관련 도구

🌈CSS 그라디언트🎨색상 변환기🎨CSS 포매터🖌️팔레트 생성기📐CSS 단위 변환