CSS 그림자 생성기

Box Shadow와 Text Shadow CSS 코드 생성

Shadow

Box Shadow 설정

Text Shadow 설정

미리보기 설정

CSS 코드

프리셋

CSS 그림자 생성기 소개

box-shadow와 text-shadow CSS 코드를 시각적으로 생성하는 무료 온라인 도구입니다. 거리, 흐림, 확산, 색상을 조절하며 실시간 미리보기로 확인할 수 있습니다. 카드 UI, 버튼 디자인에 활용하세요.

CSS 그림자 생성기 사용법

  1. 그림자 속성을 조절합니다 (거리, 흐림, 색상)
  2. 실시간 미리보기를 확인합니다
  3. box-shadow CSS 코드를 복사합니다

꿀팁

  • • 카드 UI, 버튼에 입체감을 줄 수 있습니다
  • • 여러 그림자를 겹쳐서 부드러운 효과를 만들어보세요
Getin.kr에 없는 도구가 필요하시면 로 알려주세요. 구현 가능한 도구는 만들어드립니다!

자주 묻는 질문

box-shadow와 text-shadow의 차이는?
box-shadow는 박스(요소) 전체에, text-shadow는 텍스트에만 그림자를 적용합니다.
여러 그림자를 겹칠 수 있나요?
네, 여러 그림자를 쉼표로 구분하여 겹치면 더 부드럽고 자연스러운 효과를 얻을 수 있습니다.
inset 그림자는 무엇인가요?
inset 키워드를 추가하면 바깥이 아닌 안쪽으로 그림자가 생겨 눌린 듯한 효과를 줍니다.