CSS box-shadow 하나로 평범한 UI가 입체적으로 바뀝니다. 무료 CSS 그림자 생성기로 슬라이더를 조작하며 실시간으로 확인해보세요.
box-shadow 파라미터 해설
box-shadow: X Y blur spread color;
X / Y (오프셋)
그림자의 수평·수직 위치. 양수=오른쪽·아래, 음수=왼쪽·위
blur (흐림)
값이 클수록 부드럽고 퍼진 그림자. 0이면 선명한 그림자
spread (확산)
그림자 크기 조절. 양수=크게, 음수=작게
color
rgba() 사용 권장 — 투명도로 자연스러운 그림자
실전 그림자 레시피
자연스러운 카드
0 4px 6px rgba(0,0,0,0.1)강한 드롭섀도
0 10px 25px rgba(0,0,0,0.3)글로우 효과
0 0 20px rgba(34,211,238,0.5)뉴모피즘
6px 6px 12px #b8b9be, -6px -6px 12px #fffSpinFlow CSS 그림자 생성기로 슬라이더를 조절하면 CSS 코드가 자동 생성됩니다. 복사 버튼 한 번으로 바로 적용하세요.