01
형태별 각도의 뜻 확인
선형은 0도가 위, 90도가 오른쪽입니다. 원뿔형은 독립된 시작 각도를 쓰고, 원형은 각도 대신 원/타원과 중심을 고릅니다.
HTML / CSS 도구
CSS 그라데이션 생성기실시간 미리보기
색상 스톱과 형태를 바꾸면 미리보기와 복사할 CSS가 함께 갱신됩니다.
CSS 그라데이션 생성기
색상 스톱
스톱 1
스톱 2
CSS 선언
background-image: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);색과 CSS는 이 브라우저 탭에서만 처리되며 업로드되지 않습니다.
그라데이션 옵션
CSS를 복사할 수 있습니다.
색이 세 가지 이상인 배경은 코드만 보면서 전환 지점을 맞추기 어렵습니다. CSS 그라데이션 생성기에서는 색상 스톱의 위치를 움직이며 부드러운 전환과 선명한 경계를 바로 비교할 수 있습니다.
버튼이나 카드, 원형 장식에 쓸 배경을 만들 때 CSS 그라데이션 생성기는 같은 색 조합을 유지한 채 선형·원형·원뿔형을 바꿔 볼 수 있게 합니다.
CSS 그라데이션 생성기를 쓰는 이유
같은 색으로 형태를 비교하고 스톱을 정확히 놓을 수 있습니다.
색을 유지한 채 세 형태 비교
CSS 그라데이션 생성기는 유형을 바꿔도 색과 위치를 보존합니다. 각도, 중심과 모양 옵션은 해당 유형에서만 표시되어 결과 차이를 확인하기 쉽습니다.
오래된 코드를 실수로 복사하지 않기
스톱을 이동하면 미리보기와 선언을 함께 갱신합니다. 잘못된 HEX를 입력하면 예전 결과를 흐리게 표시하고 복사를 막습니다.
결과를 바꾸는 세 가지 세부 설정
02
같은 위치로 뚜렷한 경계 만들기
핸들을 끌거나 퍼센트를 직접 입력하세요. 두 스톱의 위치가 같으면 부드러운 혼합 없이 단색 경계가 생깁니다.
03
복사 전 갱신 상태 보기
자동 생성은 기본으로 켜져 있습니다. 끄면 여러 값을 바꾼 뒤 Ctrl/Cmd+Enter로 생성할 수 있고, 그동안 오래된 CSS는 복사할 수 없습니다.
형태와 색상 스톱, CSS를 한곳에서
세 가지 그라데이션
방향을 따라 변하는 선형, 중심에서 퍼지는 원형, 둘레를 도는 원뿔형을 같은 색으로 시험합니다.
2~8개 색상 스톱
여섯 자리 HEX, 투명도와 위치를 개별 편집하거나 색상 띠의 핸들을 끌 수 있습니다.
표준 CSS 선언 복사
미리보기와 일치하는 background-image를 복사하며 반투명 색상은 rgba()로 출력합니다.
입력 한계와 지원 범위
- 스톱은 최소 2개, 최대 8개
- 마지막 두 스톱은 지울 수 없습니다. 삭제는 미리보기와 확인을 거치며 한 번 되돌릴 수 있습니다.
- 색은 여섯 자리 HEX
- #RRGGBB과 투명도를 따로 입력합니다. 잘못된 색이나 범위를 벗어난 수치가 있으면 복사를 막고, 다른 색상 형식으로 변환하지 않습니다.
- 배경 레이어 하나만 생성
- CSS 그라데이션 생성기는 표준 background-image 한 줄을 만듭니다. 이미지나 기존 CSS 가져오기, 다중 레이어, PNG·Tailwind 출력은 지원하지 않습니다.
- 문자 대비는 별도 확인
- 그라데이션 위 텍스트는 위치마다 가독성이 다릅니다. 실제 배경의 가장 불리한 위치에서 대비를 확인하세요.
CSS 그라데이션 생성기 자주 묻는 질문
선형과 원형 그라데이션은 어떻게 다른가요?
선형은 지정한 방향으로, 원형은 중심에서 바깥으로 색이 바뀝니다. CSS 그라데이션 생성기에서 같은 팔레트로 비교할 수 있습니다.
그라데이션 각도는 어느 방향인가요?
선형에서 0도는 위, 90도는 오른쪽입니다. 원뿔형에는 별도 시작 각도가 있고 원형에는 방향 각도가 없습니다.
색상 스톱을 더 추가할 수 있나요?
네. 가장 큰 간격의 가운데에 새 색을 넣고 최대 여덟 개까지 위치와 색을 조정할 수 있습니다.
그라데이션 위의 글자가 잘 안 보이면 어떻게 하나요?
밝은 구간과 어두운 구간 모두에서 대비를 확인하세요. 이 도구는 배경을 미리 보여 주지만 글자 대비를 자동 판정하지 않습니다.
만든 CSS 코드는 어디에 넣나요?
복사한 background-image 선언을 원하는 선택자의 CSS 규칙에 붙여 넣으면 됩니다. 별도 이미지 파일은 필요 없습니다.
다른 경계 사례를 찾으셨나요?