CSS 그라데이션
CSS 그라데이션의 방향, 색상 스톱, 불투명도, 미리보기를 조정하고 코드나 이미지로 내보내세요.
CSS 그라데이션은 무엇을 만들 수 있나요
CSS 그라데이션은 두 개 이상의 색이 자연스럽게 이어지는 배경, 카드, 버튼, 텍스트 효과, 오버레이를 만들 때 사용합니다. 이 화면은 CSS gradient generator처럼 색상 스톱, 방향, 각도, 유형, 불투명도를 조정하고 결과 CSS를 복사하거나 PNG, JPG, WebP, SVG, PDF 형식으로 내보내는 작업에 맞춰 구성되어 있습니다. MDN의 CSS 문서에서도 그레이디언트는 적용되는 요소의 크기에 맞춰 렌더링되는 이미지 값으로 설명되므로, 실제 화면 크기와 배치에서 함께 확인하는 것이 중요합니다.
그라데이션은 단순히 장식용 배경이 아닙니다. 색의 이동 방향은 시선을 이끌고, 색상 스톱은 강조 지점을 만들며, 불투명도는 콘텐츠 위에 놓였을 때 가독성을 조절합니다. 같은 색 두 개를 써도 각도와 중간 스톱을 다르게 설정하면 분위기가 크게 달라집니다. 따라서 결과를 코드로 복사하기 전에 미리보기 모드와 내보내기 크기를 함께 보며 실제 사용 환경에 맞게 조정해야 합니다.
CSS 그라데이션 사용 방법
- 미리보기 영역에서 현재 그라데이션을 확인하고, 필요하면 확대 미리보기 버튼으로 더 크게 봅니다.
- 배경, 카드, 버튼, 텍스트 미리보기 모드를 바꿔 실제 적용 대상과 비슷한 상태에서 결과를 확인합니다.
- 선형, 방사형, 원뿔형, 마름모 유형 중 원하는 그라데이션 방식을 선택합니다.
- 방향 버튼이나 각도 입력을 사용해 색이 흐르는 방향을 조정합니다. 선형 그라데이션에서는 각도가 특히 중요합니다.
- 색상 스톱 영역에서 색을 추가하거나 위치를 조정해 전환 지점을 세밀하게 맞춥니다.
- 불투명도 슬라이더와 숫자 입력으로 결과의 투명도를 조정합니다.
- CSS 복사 버튼으로 stylesheet에 넣을 코드를 가져가거나, 다운로드 메뉴에서 PNG, JPG, WebP, SVG, PDF 중 필요한 형식을 선택합니다.
- 내보내기 크기의 너비와 높이를 설정해 이미지 파일이 실제 사용 목적에 맞는 크기로 저장되도록 합니다.
그라데이션 유형과 사용 상황
gradient generator에서 가장 중요한 선택은 유형입니다. 유형이 바뀌면 같은 색상 스톱도 완전히 다른 구조로 보입니다. 아래 표는 화면에서 선택할 수 있는 유형을 실제 사용처와 연결한 것입니다.
| 유형 | 적합한 사용처 | 확인할 점 |
|---|---|---|
| 선형 | 히어로 배경, 카드 배경, 버튼, 섹션 분리 | 각도가 콘텐츠 흐름과 충돌하지 않는지 봅니다. |
| 방사형 | 중앙 강조, 조명 효과, 제품 배경 | 중심 근처의 밝기가 텍스트를 방해하지 않아야 합니다. |
| 원뿔형 | 원형 그래픽, 배지, 장식 요소 | 색 전환 경계가 너무 날카롭지 않은지 확인합니다. |
| 마름모 | 포스터 느낌의 배경, 강한 장식 패턴 | 큰 영역에서 반복감이나 시선 분산이 생길 수 있습니다. |
색상 스톱을 조정하는 기준
색상 스톱은 그라데이션의 품질을 결정합니다. 두 색만 사용하면 깔끔하지만 단조로울 수 있고, 세 개 이상의 스톱을 쓰면 더 풍부한 전환을 만들 수 있습니다. 다만 스톱이 많아질수록 색의 경계가 예상보다 복잡해지고, 압축된 이미지에서 밴딩이 보일 수도 있습니다. 넓은 배경에는 부드러운 변화가 잘 맞고, 버튼이나 작은 카드에는 짧고 명확한 전환이 더 안정적입니다.
- 배경 위에 텍스트를 올릴 때는 텍스트 위치 주변의 명도 차이를 먼저 확인합니다.
- 브랜드 색을 포함할 때는 색상 스톱 하나를 고정하고 나머지를 보조 톤으로 조정합니다.
- 이미지로 내보낼 때는 실제 표시 크기보다 너무 작은 크기로 저장하지 않습니다.
- SVG는 선명한 확대가 필요할 때 좋고, WebP는 웹용 래스터 이미지 용량을 줄이는 데 유리합니다.
- CSS 코드는 유지보수하기 쉬우므로 웹 배경에는 이미지보다 먼저 검토할 가치가 있습니다.
코드와 이미지 내보내기를 나눠 쓰는 방법
웹사이트 배경이나 컴포넌트 스타일에는 CSS 복사가 가장 실용적입니다. CSS는 해상도에 독립적이고, 색상 스톱과 각도를 나중에 수정하기 쉽습니다. 반대로 썸네일, 문서, 프레젠테이션, 디자인 공유 이미지에는 PNG, JPG, WebP 같은 래스터 내보내기가 편리합니다. 로고나 벡터 작업 흐름에 넣어야 한다면 SVG가 더 적합할 수 있습니다.
그라데이션의 색을 먼저 정해야 한다면 색 조합에서 팔레트를 만들고, 텍스트 위에 적용할 예정이라면 명도 대비로 전경색과 배경색을 확인하세요. 조화로운 색과 읽기 쉬운 색은 같은 판단이 아니므로, 배경으로 쓸 때와 텍스트와 겹칠 때를 반드시 분리해서 봐야 합니다.
실제 적용 전 확인할 점
- 그라데이션 위에 제목, 본문, 버튼이 올라가면 미리보기만 볼 때보다 대비 문제가 더 쉽게 드러납니다.
- 강한 색상 전환은 시선을 끌지만 긴 콘텐츠 배경에서는 피로감을 줄 수 있습니다.
- 밝은 색과 어두운 색이 동시에 들어간 배경은 텍스트 위치에 따라 가독성이 달라집니다.
- 내보낸 이미지 파일은 압축과 색 공간 차이 때문에 브라우저의 CSS 결과와 조금 다르게 보일 수 있습니다.
- 전역 배경으로 쓰기 전에는 모바일 높이, 다크 모드, 카드 그림자, 오버레이와 함께 테스트합니다.