CSS 그림자 생성기

그림자 매개변수를 시각적으로 조정하고, 다중 레이어를 지원하며 바로 사용할 수 있는 CSS를 한 번에 복사하세요.

제보
그림자 레이어
미리보기 및 출력
미리보기
미리보기 배경
미리보기 박스
그림자 텍스트 미리보기
CSS 출력
1
유형 선택

상단 도구 모음에서 Box Shadow(요소 박스)와 Text Shadow(글자)를 전환합니다.

2
레이어마다 조정

슬라이더로 오프셋, 블러, 색상, 투명도를 바꿉니다. Box Shadow에서는 확산(spread)과 inset도 사용할 수 있습니다.

3
여러 레이어 겹치기

「레이어 추가」로 값을 겹칩니다. CSS는 쉼표로 연결되며 앞에 쓴 값이 더 바깥쪽에 보입니다.

4
복사 후 적용

미리보기가 괜찮으면 「CSS 복사」를 눌러 스타일시트나 컴포넌트 스타일에 붙여넣습니다.

안내: 미리보기 배경색은 비교용이며 출력 CSS에는 포함되지 않습니다.

box-shadow와 text-shadow의 차이는?
box-shadow는 요소 박스 전체에, text-shadow는 글자 획에 적용됩니다. inset과 spread는 box-shadow에서만 지원합니다.
여러 그림자를 겹칠 수 있나요?
네. CSS는 쉼표로 여러 값을 허용하며 앞쪽 값이 더 바깥에 그려집니다. 여기서 레이어를 추가해 실시간으로 확인하세요.
inset이란?
inset을 켜면 그림자가 요소 안쪽에 그려져 눌린 버튼 같은 효과에 쓰입니다. text-shadow에는 inset이 없습니다.
spread 음수는 왜 쓰나요?
음수 spread는 그림자를 줄입니다. 큰 오프셋과 함께 쓰면 한쪽만 또렷한 그림자를 만들 수 있습니다.
복사한 CSS는 어디에 붙이나요?
일반 .css 파일, 프레임워크 스타일, 개발자 도구 Styles 등에 붙일 수 있습니다. CSS-in-JS라면 style 객체에 매핑하세요.
파일 형식 디지털 워크플로우 호환성
2026-06-20

파일 형식 변환의 구조적 사고: 저수준 인코딩부터 크로스 플랫폼 최적화까지

파일 형식 변환의 이면에 숨겨진 원리를 깊이 파고들어, 구조적 사고를 통해 시스템 호환성 문제를 해결하고 효율적인 변환 전략을 구축하는 방법을 설명합니다.

이미지 압축 밈 만들기 SNS 마케팅
2026-05-17

온라인 이미지 압축/편집 도구: 고화질 밈 및 SNS 게시물 시각화 가이드

인기 있는 밈과 SNS 게시물을 만들고 싶지만 이미지 용량 제한, 크기 불일치, 칙칙한 색상으로 어려움을 겪고 계신가요? 온라인 이미지 압축 및 색상 변환 도구를 사용하여 화질을 최적화하고 시선을 사로잡는 콘텐츠를 만드는 방법을 소개합니다.

인코딩 Base64 URL인코딩
2026-06-23

인코딩 표준과 전송 메커니즘: 문자 인코딩, Base64 및 URL 안전성 해석

문자 인코딩이 네트워크 통신에 미치는 영향을 깊이 있게 탐구하고, Base64의 실제 용도와 URL 인코딩의 하위 규칙을 분석하여 크로스 플랫폼 전송 시 발생하는 깨진 글자 문제를 해결합니다.

기술 문서 Markdown API 문서
2026-05-11

기술 문서 작성 완전 가이드:Markdown 규범, API 문서화 및 엔지니어 글쓰기 모범 사례

훌륭한 코드에는 훌륭한 문서가 필요합니다. README 작성법, Markdown 규범, API 문서의 필수 요소, 그리고 Docs as Code 엔지니어링 워크플로우까지, 기술 문서를 진정한 자산으로 만드는 방법을 완전히 정리했습니다.

Markdown 글쓰기 도구 프론트엔드
2026-03-23

Markdown 완전 가이드:기초 문법부터 실전 활용까지

Markdown은 작가·개발자·콘텐츠 크리에이터가 가장 많이 사용하는 경량 마크업 언어입니다. 기본 문법부터 고급 테크닉, 플랫폼별 활용법까지 완전히 해설합니다.

파일 형식 형식 변환 디지털 협업
2026-06-10

파일 형식 상호 운용성 및 변환 전략: 크로스 플랫폼 협업을 위한 무손실 실천

일반적인 파일 형식의 차이를 깊이 있게 탐구하고, 효율적인 변환 베스트 프랙티스를 제공하여 크로스 플랫폼 협업의 호환성 문제를 해결합니다.