CSS 그라데이션 생성기
마지막 업데이트: 2026-06-25
CSS 그라데이션 생성기는 시작색·끝색과 각도를 정하면 linear-gradient(또는 radial-gradient) CSS 코드와 실시간 미리보기를 만들어 줍니다.
예: background: linear-gradient(90deg, #14b8a6, #0f172a); — 복사 버튼으로 바로 가져갈 수 있습니다.
그라데이션 설정
미리보기
CSS 코드
생성된 코드는 CSS background 속성 값입니다. 오래된 브라우저 호환이 필요하면 단색 background를 대체값으로 함께 두세요.
사용 방법
- 색 지정 — 시작색과 끝색을 색상 선택기 또는 HEX로 지정합니다.
- 각도·종류 선택 — 선형(linear) 또는 원형(radial)을 고르고, 선형일 때 각도를 0~360도로 설정합니다.
- 코드 복사 — 미리보기를 확인한 뒤 생성된 background CSS 코드를 복사해 사용합니다.
CSS 그라데이션 각도와 종류 이해하기
CSS linear-gradient()는 각도(deg)를 기준으로 색이 직선으로 변합니다. 각도 0deg는 아래에서 위로 향하며, 90deg는 왼쪽에서 오른쪽으로 진행합니다. 각도를 키우면 시계 방향으로 회전합니다.
| 각도 | 방향 | 활용 예 |
|---|---|---|
| 0deg | 아래 → 위 | 하단 강조 배경 |
| 90deg | 왼쪽 → 오른쪽 | 가로 배너·버튼 |
| 135deg | 좌상 → 우하 대각 | 히어로 섹션, 카드 |
| 180deg | 위 → 아래 | 상단 헤더 음영 |
| radial | 중심 → 바깥 | 조명·원형 강조 |
같은 두 색이라도 각도에 따라 인상이 크게 달라집니다. 대각선(135deg) 그라데이션은 입체감과 깊이를 주어 히어로 섹션에 자주 쓰입니다. 시작색과 끝색의 명도 차이가 너무 크면 글자 가독성이 떨어질 수 있으니, 그라데이션 위 텍스트는 색 대비 검사기로 확인하는 것이 좋습니다.
자주 묻는 질문 (FAQ)
CSS 그라데이션 각도는 어떻게 정해지나요?
linear-gradient의 각도는 0deg가 아래에서 위로(상향), 90deg가 왼쪽에서 오른쪽으로 진행합니다. 각도를 키우면 시계 방향으로 그라데이션 방향이 회전합니다.
linear-gradient와 radial-gradient는 무엇이 다른가요?
linear-gradient는 지정한 각도를 따라 직선으로 색이 변하고, radial-gradient는 중심에서 바깥으로 원형으로 색이 퍼집니다. 버튼·배너에는 선형이, 조명·원형 강조에는 원형이 자주 쓰입니다.
생성된 코드는 어디에 붙여넣나요?
복사한 코드는 CSS의 background 속성 값입니다. 예를 들어 .hero { background: linear-gradient(90deg, #14b8a6, #0f172a); } 처럼 원하는 선택자에 붙여넣으면 됩니다.
그라데이션이 모든 브라우저에서 동작하나요?
linear-gradient와 radial-gradient는 모든 최신 브라우저에서 접두사 없이 지원됩니다. 매우 오래된 브라우저를 지원해야 한다면 단색 background를 대체값으로 함께 지정하는 것이 안전합니다.
관련 도구·가이드
마지막 업데이트: 2026-06-25