CSS 그라디언트·박스 섀도 만들기

CSS 그라디언트·그림자 생성기 사용 방법

1. 1

   그라디언트 또는 박스 섀도 선택

   미리보기 위의 탭으로 두 편집기를 전환하세요.

2. 2

   프리셋으로 시작

   프리셋 타일을 클릭해 불러오거나, 기본값에서 바로 조정하세요.

3. 3

   시각적으로 조정

   색상 스톱을 끌고 각도를 정하거나, 그림자 레이어를 추가해 오프셋, 흐림, 확장을 조절하세요.

4. 4

   코드 복사

   CSS 선언 또는 Tailwind 클래스를 복사해 프로젝트에 붙여 넣으세요.

CSS 그라디언트·그림자 생성기 소개

그라디언트와 그림자는 브라우저 개발자 도구에서 시행착오를 겪으며 가장 자주 손보게 되는 CSS 효과예요. 이 생성기는 둘 다 큼직한 실시간 미리보기가 있는 시각 편집기로 만들 수 있고, 정확한 CSS 선언과 그에 맞는 Tailwind 임의 값 클래스(예: bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)])를 써 줘요. 결과를 스타일시트나 className에 바로 붙여 넣으면 돼요.

그라디언트 편집기에서는 선형, 원형, 원뿔형 그라디언트를 만들 수 있어요. 스톱 바를 클릭하면 클릭한 위치에 색이 추가되고, 스톱을 끌어 옮기거나 방향키로 정밀하게 위치를 조절할 수 있어요. 스톱마다 불투명도도 따로 정할 수 있어요. 선형과 원뿔형은 각도를, 원형과 원뿔형은 중심점을, 원형은 원 또는 타원 모양을 정할 수 있고, 모두 반복해서 줄무늬나 고리 모양도 만들 수 있어요. 색을 섞는 색상 공간도 고를 수 있어요. OKLab과 OKLCH는 채도 높은 색 사이에서 기존 sRGB 혼합이 만드는 탁한 회색빛 중간 구간을 피해 주고, 최신 브라우저에서 모두 지원돼요.

박스 섀도 편집기에서는 필요한 만큼 레이어를 쌓을 수 있어요. 레이어마다 X·Y 오프셋, 흐림, 확장, 불투명도가 있는 색, 안쪽 스위치, 표시 토글이 있고, 첫 번째 레이어가 맨 위에 그려지므로 순서도 바꿀 수 있어요. 크기, 모서리 반경, 색을 바꿀 수 있는 미리보기 박스로 밝거나 어두운 배경에서 효과를 확인해요.

각 편집기에는 프리셋이 12개씩 있어요. 선셋, 색상환, 줄무늬부터 Material 고도, 레이어드 부드러운 그림자, 뉴모피즘, 하드 오프셋까지, 시작점으로 쓰기 좋아요. 이 도구는 그라디언트와 박스 섀도만 다루며 text-shadow, filter: drop-shadow, SVG 그라디언트는 생성하지 않아요.

기능

CSS 그라디언트·그림자 생성기: 자주 묻는 질문