CSS 그림자 생성기
그림자 매개변수를 시각적으로 조정하고, 다중 레이어를 지원하며 바로 사용할 수 있는 CSS를 한 번에 복사하세요.
- Box Shadow 또는 Text Shadow 탭을 선택합니다.
- 수평 오프셋, 수직 오프셋, 블러 반경, 색상, 투명도를 조정합니다.
- 「레이어 추가」를 클릭하여 여러 그림자를 겹칠 수 있습니다.
- 미리보기가 마음에 들면 「CSS 복사」로 스타일시트에 붙여넣으세요.
box-shadow와 text-shadow의 차이는?
box-shadow는 요소의 박스 전체에 적용되고, text-shadow는 텍스트 자체에 적용됩니다. 전자는 inset과 spread를 지원하지만 후자는 지원하지 않습니다.
여러 개의 그림자 레이어를 겹칠 수 있나요?
네. CSS에서는 쉼표로 구분하여 여러 shadow 값을 지정할 수 있으며, 앞에 쓸수록 위에 표시됩니다. 이 도구에서 여러 레이어를 추가하고 실시간으로 확인할 수 있습니다.
inset이란 무엇인가요?
inset을 지정하면 그림자가 요소 외부가 아닌 내부에 표시됩니다. 버튼 눌림 효과 등에 자주 사용됩니다. text-shadow에서는 사용할 수 없습니다.
spread 음수 값은 어디에 사용하나요?
음수 spread 값은 그림자를 축소시킵니다. 큰 offset과 조합하면 한쪽만 자연스럽게 그림자지는 효과를 만들 수 있습니다.
이미지 형식 선택 가이드：JPG·PNG·WebP·GIF 완전 비교
왜 PNG는 JPG보다 몇 배나 클까요? WebP는 언제 써야 할까요? GIF는 이제 구식인가요? 압축 원리부터 시작해 상황별 최적 형식을 선택하는 방법을 정리했습니다.
소셜 콘텐츠 이미지 편집 가이드: 규격, 비주얼 일관성, 내보내기 설정
소셜 콘텐츠의 완성도는 아이디어만으로 결정되지 않습니다. 이미지 크기, 구도, 브랜드 일관성, 출력 설정까지 재사용 가능한 편집 워크플로를 정리했습니다.
PDF 병합·분할·압축 완전 정복：일상 문서 정리 가이드
큰 PDF에서 필요한 페이지만 꺼내고 싶다면? 여러 보고서를 하나로 합쳐야 한다면? 파일이 너무 커서 업로드가 안 된다면? 가장 흔한 PDF 작업 4가지를 설치 없이 해결하는 방법을 알아봅니다.
두 텍스트의 차이를 비교하는 방법? Diff 알고리즘 원리와 텍스트 비교 도구 완벽 가이드
텍스트 비교(diff)는 두 문서 사이의 차이를 찾는 기술로, 버전 관리·코드 리뷰·문서 교정에 널리 활용됩니다. diff의 알고리즘 원리, 출력 형식, 실제 활용 사례를 설명합니다.
Markdown 완전 가이드：기초 문법부터 실전 활용까지
Markdown은 작가·개발자·콘텐츠 크리에이터가 가장 많이 사용하는 경량 마크업 언어입니다. 기본 문법부터 고급 테크닉, 플랫폼별 활용법까지 완전히 해설합니다.
데이터 시각화 입문: 올바른 차트 유형 선택 방법
막대형, 꺾은선형, 원형, 산점도 — 다양한 차트 종류 중 어떤 것을 골라야 할까요? 데이터 유형과 전달 목적에 따른 차트 선택 프레임워크를 알아보고, 흔한 시각화 실수를 피해봅시다.