CSS 그라데이션 생성기 사용 방법
선형·원형 종류, 방향 또는 위치, 시작색과 끝색을 선택합니다.
결과에서 확인할 내용
실시간 미리보기와 복사 가능한 background CSS가 생성됩니다.
이 도구가 필요한 상황
두 색과 위치·각도를 바꾸며 선형 또는 원형 그라데이션을 미리 보고 CSS 선언을 얻습니다.
실제 사용 예시
시작 색 #4f46e5를 0%, 끝 색 #06b6d4를 100%, 각도를 135도로 두면 대각선으로 흐르는 배경을 만들 수 있습니다. 두 색의 위치를 같은 값으로 두면 부드러운 전환이 사라집니다.
결과를 정확히 읽는 방법
- 선형의 각도는 CSS 기준으로 0도가 위쪽을 향합니다.
- 원형에서는 각도 대신 원의 형태와 색상 위치가 결과를 좌우합니다.
- 명도 차이가 작은 색 조합 위의 흰 글자는 읽기 어려울 수 있습니다.
완료 전 확인
완성된 배경 위에 실제 텍스트와 버튼을 올려 대비와 모바일 가독성을 확인하세요.
사용 전 꼭 확인하세요
텍스트가 올라가는 배경이라면 두 색상 구간 모두에서 명도 대비를 확인하세요.
도구 설명 최종 수정: 2026년 10월 9일