시각적으로 CSS 그라데이션 만들기
그라데이션은 이미지 파일 하나 없이도 버튼, 히어로 섹션, 카드, 배경에 깊이감과 색채를 더해줍니다. 하지만 코드를 직접 작성하려면 각도와 퍼센트를 어림짐작하고 페이지를 계속 새로고침해야 합니다. 이 CSS 그라데이션 생성기를 사용하면 실시간 미리보기로 그라데이션을 시각적으로 디자인할 수 있으며, 모든 최신 브라우저에서 작동하는 깔끔한 CSS 코드를 바로 복사할 수 있습니다.
주요 기능
- 3가지 그라데이션 종류: 선형(linear), 방사형(radial - 원형 또는 타원형), 원뿔형(conic).
- 최대 8개의 색상 지정 및 드래그로 위치 조정.
- 선형 및 원뿔형 그라데이션을 위한 각도 조절 슬라이더.
- 빠른 영감을 얻을 수 있는 프리셋 및 랜덤 버튼.
- CSS에 대체 단색(Fallback) 색상 포함.
- 클릭 한 번으로 코드 복사.
CSS 사용 방법
스타일을 적용할 요소의 CSS 규칙에 코드를 붙여넣으세요:
.hero {
background: #0ea5e9;
background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
}
CSS에서 그라데이션은 이미지로 취급되므로 background-image에 사용하거나, 쉼표로 구분해 여러 개를 겹치거나, 사진과 함께 사용할 수도 있습니다. 예를 들어 background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(photo.jpg);처럼 사용하면 사진을 어둡게 처리해 그 위의 흰색 텍스트 가독성을 높일 수 있습니다.
디자인 팁
- 은은하게 연출하세요. 인접한 두 색상(파란색과 보라색, 주황색과 분홍색 등)을 조합하는 것이 보색을 사용하는 것보다 훨씬 부드럽고 세련되어 보입니다.
- 대비를 확인하세요. 그라데이션 위에 텍스트가 있는 경우, 양쪽 끝 색상 모두에서 글자가 잘 읽히는지 확인하세요. 명암비를 보여주는 색상 변환기로 색상을 테스트해 볼 수 있습니다.
- 브랜드 이미지에서 색상을 추출하려면 이미지 색상 추출기를 사용해 보세요.
- 카드와 버튼에 입체감을 더하려면 박스 그림자 생성기를 사용해 보세요.