Box Shadow CSS 생성기
시각적으로 box-shadow CSS를 만들고 코드를 복사하세요
그림자 설정
가로 오프셋
0px
세로 오프셋
10px
흐림
25px
확산
0px
그림자 색
투명도
30%
안쪽 그림자
미리보기
Preview
CSS 코드
box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
코드 복사
프리셋 그림자
Subtle
Light
Medium
Strong
사용 팁
이렇게 사용하세요
카드나 버튼에 깊이감 추가
모달이나 팝업에 레이어 강조
호버 효과로 인터랙션 표현
입력 필드에 포커스 효과
알아두세요
여러 개의 box-shadow를 쉼표로 구분하여 적용 가능
inset 속성으로 안쪽 그림자 생성
모든 모던 브라우저에서 지원됩니다
과도한 그림자는 성능에 영향을 줄 수 있습니다
Instagram
Twitter
Facebook
Threads
YouTube
Naver Blog
Pinterest