사용 방법
그라데이션 종류와 각도, 두세 가지 색과 각 위치를 고르세요. 미리보기가 바로 바뀌고, 그대로 붙여 넣을 수 있는 CSS 코드와 발표 자료·배경화면·SNS 게시물용 1920 × 1080 PNG를 받을 수 있어요.
background: linear-gradient(135deg, #2459e0 0%, #f2b33d 100%);
그라데이션 종류
- 선형: 정한 각도의 직선을 따라 색이 섞여요(0° = 아래에서 위, 90° = 왼쪽에서 오른쪽).
- 원형: 가운데에서 원 모양으로 색이 퍼져요.
- 원뿔형: 색상환이나 원그래프처럼 가운데를 중심으로 색이 빙 돌아요.
활용 팁
- 색상환에서 가까운 색끼리가 반대색보다 더 부드럽게 섞여요.
- 그라데이션 위 글자는 양 끝 모두에서 명도 대비를 확인해 잘 읽히게 하세요.
- 최신 브라우저는 모두 접두사 없이 이 CSS 그라데이션을 지원해요.
계산 기준과 출처
- 그라데이션 문법은 CSS Images Module Level 3·4(W3C)를 따름
최종 검토 2026년 10월 7일
자주 묻는 질문
CSS 그라데이션은 어떻게 만드나요?
종류를 고르고 각도와 색을 정한 뒤, 만들어진 "background" 줄을 스타일시트에 붙여 넣으세요.
각도는 무슨 뜻인가요?
선형 그라데이션에서 0°는 아래에서 위로, 90°는 왼쪽에서 오른쪽으로, 180°는 위에서 아래로 진행해요.
색을 3개 이상 쓸 수 있나요?
네. "중간 색 추가"를 체크하면 위치를 따로 정할 수 있는 세 번째 색이 추가돼요.
그라데이션을 이미지로 저장할 수 있나요?
네. "PNG 다운로드"를 누르면 발표 자료, 배경화면, SNS에 바로 쓸 수 있는 1920 × 1080 이미지가 저장돼요.
모든 브라우저에서 되나요?
선형과 원형 그라데이션은 어디서나 되고, 원뿔형은 Chrome, Edge, Firefox, Safari 최신 버전에서 모두 돼요.