CSS 그라데이션 생성기

기능

CSS 그라데이션 생성기로 눈으로 보면서 그라데이션을 만들고 완성된 CSS를 복사할 수 있습니다. 선형, 방사형, 원뿔형 중 하나를 고르고, 색상 정지점을 원하는 만큼 추가해 위치를 끌어 옮기고, 각도나 중심점을 정하면 미리 보기가 바로 갱신됩니다. 기존 linear-gradient(…), radial-gradient(…), conic-gradient(…)를 붙여 넣어 시각적으로 편집할 수도 있습니다. 모든 처리는 브라우저에서 이루어집니다.

사용 방법

1. 프리셋에서 시작하거나 예시 그라데이션을 그대로 사용합니다.
2. 유형을 고릅니다. 선형과 원뿔형에는 각도가, 방사형과 원뿔형에는 중심 X, 중심 Y로 옮길 수 있는 중심점이 있습니다.
3. 색상 정지점을 편집합니다. 선택기로 색을 바꾸거나 CSS 색상을 직접 입력하고, 위치를 끌어 옮깁니다. 정지점 추가는 가장 넓은 간격에 하나를 넣고, 뒤집기는 순서를 반대로 합니다.
4. 반복을 켜면 그라데이션이 타일처럼 이어져 줄무늬와 고리가 만들어집니다.
5. CSS 카드에서 코드를 복사합니다. 아주 오래된 브라우저를 위해 단색 대체 색상을 넣을 수도 있습니다.

아래의 그라데이션 CSS 상자는 그라데이션 값을 보여 주며 편집할 수 있습니다. 스타일시트나 디자인 도구의 그라데이션을 붙여 넣으면 위의 컨트롤이 읽어 들입니다.

예시

.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

좋은 그라데이션을 위한 팁

• 은은하게. 이웃한 색상(파랑에서 보라, 주황에서 분홍)이 보색보다 부드럽습니다. 보색은 가운데가 탁한 회색이 되기 쉽습니다.
• 가운데 정지점을 추가해 섞이는 정도를 조절하세요. 양옆보다 조금 밝은 세 번째 정지점으로 부드러운 하이라이트를 만들 수 있습니다.
• 하드 스톱으로 모양 만들기. 같은 위치의 정지점은 선명한 경계를 만듭니다. 줄무늬, 깃발, 진행 막대, 원형 차트가 모두 이 기법을 씁니다.
• 방향. to right는 90deg, to bottom(기본값)은 180deg입니다. 각도는 위쪽에서 시계 방향으로 잽니다.
• 그라데이션 위의 글자는 그라데이션 전체에서 읽기 쉬워야 합니다. 가장 밝은 정지점과 가장 어두운 정지점을 대비 검사기로 글자 색과 비교해 보세요.