CSS Box Shadow 생성기
원하는 만큼 그림자 레이어를 쌓고, 각 레이어의 offset·blur·spread·color·inset을 조정하면 미리보기가 즉시 갱신됩니다. 6개 프리셋(Soft, Medium, Large, Neumorphism, Inset, Glow)로 흔한 디자인을 빠르게 시작할 수 있고, 결과는 CSS 규칙과 Tailwind 임의값 클래스 두 형태로 복사됩니다.
—
프리셋
그림자 레이어
미리보기
CSS
box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.15), 0px 2px 6px -2px rgba(0, 0, 0, 0.08);
Tailwind
shadow-[0px_8px_24px_-4px_rgba(0,_0,_0,_0.15),_0px_2px_6px_-2px_rgba(0,_0,_0,_0.08)]
사용법
- 프리셋을 고르거나 처음부터 시작하세요.
- 각 레이어의 offset·blur·spread·color를 조정하세요.
- 내부 그림자가 필요하면 Inset을 켜세요.
- CSS 규칙이나 Tailwind 클래스를 복사하세요.
자주 묻는 질문
- Blur와 Spread 차이는?
- Blur는 그림자 경계를 부드럽게 — 투명으로 사라지는 거리. Spread는 흐림 전에 그림자 모양 자체를 키우거나 줄임 (음수면 안쪽으로 끌어당김).
- 레이어를 여러 개 쓰는 게 좋은가요?
- 자연스러운 그림자는 보통 2개 이상이 필요합니다 — 가까이 진한 레이어 + 멀리 흐릿한 레이어. Material Design이나 Tailwind 기본 그림자도 모두 다중 레이어입니다.
- 왜 HEX 대신 rgba()?
- 투명도가 있는 색이 배경에 자연스럽게 녹아들어 더 사실적입니다. rgba()는 알파(투명도)를 직접 지정할 수 있습니다.
- Tailwind 클래스의 밑줄은?
- Tailwind는 공백을 클래스 구분자로 취급해서, 임의값에선 공백 대신 밑줄을 씁니다.
관련 도구
CSS 텍스트 그림자 생성기 (멀티 레이어)
여러 text-shadow 레이어를 쌓아 네온 글로우·3D·아웃라인·롱섀도 효과 — 라이브 프리뷰 + 복사 가능 CSS.
색상 0 0
CSS 그라디언트 생성기
선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.
색상 0 0
CSS 필터 플레이그라운드
blur·brightness·contrast·hue·sepia·invert 등 9개 필터 시각 조합 — CSS 또는 Tailwind 임의값으로 복사.
색상 0 0
컬러 토큰 익스포터
컬러 팔레트 한 번 정의 → CSS 커스텀 프로퍼티·Tailwind 설정·SCSS·LESS·디자인 토큰 JSON·SwiftUI Color·Android `colors.xml`로 익스포트. 라이브 미리보기 스워치.
색상 0 0
색상 이름 찾기
임의의 hex/RGB 색상에 가장 가까운 CSS·Tailwind·XKCD 색상 이름을 OKLab 인지 거리 기준으로 정렬해 표시.
색상 0 0
HSL 색상 픽커
Hue·Saturation·Lightness·Alpha 슬라이더로 색 조정 — HEX·RGB·HSL·Tailwind 임의 값 복사.
색상 0 0