그라데이션 생성기
온라인 CSS 그라데이션 생성 도구, 선형 그라데이션과 방사형 그라데이션 생성, 시각적 조정 및 원클릭 코드 복사
미리보기
설정
색상 중지점
0%
100%
사전 설정 템플릿
CSS 코드
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);CSS 그라데이션이란?
CSS 그라데이션(Gradient)은 두 개 이상의 색상 사이를 부드럽게 전환하는 효과입니다. 선형 그라데이션은 직선 방향으로 전환하고, 방사형 그라데이션은 중심점에서 바깥쪽으로 확산 전환합니다. 그라데이션은 배경, 버튼, 카드 등 요소에 사용하여 시각적 효과를 향상할 수 있습니다.
사용 방법
- 그라데이션 유형을 선택합니다: 선형 그라데이션 또는 방사형 그라데이션
- 색상 중지점을 추가하고 각 색상의 위치를 조정합니다
- 선형 그라데이션은 각도 방향을 설정할 수 있고, 방사형 그라데이션은 중심 위치를 설정할 수 있습니다
- 그라데이션 효과를 실시간으로 미리 봅니다
- '코드 복사'를 클릭하여 CSS 코드를 가져옵니다
- 사전 설정 템플릿을 선택하여 일반적인 그라데이션을 빠르게 적용합니다
주요 용도
- 웹페이지 배경: 페이지 또는 섹션에 그라데이션 배경을 추가
- 버튼 스타일: 그라데이션 버튼을 생성하여 시각적 매력을 향상
- 카드 장식: 카드에 그라데이션 테두리 또는 배경을 추가
- 브랜드 색상: 브랜드 색상을 사용하여 그라데이션 효과를 생성
- UI 디자인: 디자인 참조를 위한 그라데이션 프로토타입을 빠르게 생성
자주 묻는 질문 (FAQ)
Q: 선형 그라데이션과 방사형 그라데이션의 차이는?
A: 선형 그라데이션은 지정된 각도의 직선 방향으로 색상을 전환합니다. 방사형 그라데이션은 중심점에서 바깥쪽으로 확산 전환하며, 원형 확산 효과와 유사합니다.
Q: 색상 중지점의 위치란 무엇인가요?
A: 위치 백분율은 그라데이션에서 색상이 나타나는 위치를 나타냅니다. 0%는 시작점이고 100%는 끝점입니다. 예를 들어 두 색상이 각각 0%와 50%에 있으면, 전반부는 첫 번째 색상에서 두 번째 색상으로의 전환입니다.
Q: 다색 그라데이션은 어떻게 생성하나요?
A: '색상 추가' 버튼을 클릭하여 더 많은 색상 중지점을 추가합니다. 각 색상은 다른 위치를 설정할 수 있어 복잡한 그라데이션 효과를 만들 수 있습니다.
Q: 생성된 CSS 코드는 어떻게 사용하나요?
A: 코드를 복사한 후, background 또는 background-image 속성 값으로 CSS 스타일시트에 적용합니다. 예: .element { background: linear-gradient(...); }