- "선형" 또는 "원형" 그라데이션 종류를 고릅니다. 선형은 각도로 방향을, 원형은 중심에서 퍼지는 형태입니다.
- "+ 색 추가"로 정지점을 늘리고, 각 색상과 위치(%)를 조절합니다. 두 개 이상부터 그라데이션이 만들어집니다.
- 위쪽 미리보기에서 결과를 실시간으로 확인합니다.
- 완성되면 "CSS 복사"로 background 속성 코드를 복사해 스타일시트에 붙여넣습니다.
CSS 그라데이션은 색을 부드럽게 이어 붙인 배경입니다. 세 가지만 정하면 됩니다: 종류, 방향, 색 정지점.
- 종류: 선형(linear)은 직선 방향, 원형(radial)은 중심에서 퍼짐.
- 방향: 선형은 각도(deg), 원형은 중심 위치로 정합니다.
- 색 정지점(color stop): 각 색과 위치(%)를 지정해 색이 바뀌는 지점을 조절합니다.
이미지가 아니라 코드라 용량이 0이고 어느 해상도에서도 깨지지 않습니다. 문법·배색은 CSS 그라데이션 가이드에 정리했습니다.
아래는 이 도구에서 선형 90° 그라데이션을 만든 뒤, 크롬에서 미리보기의 정가운데(50% 지점) 색을 읽은 값입니다.
| 시작 색 → 끝 색 | 가운데 색 | 보이는 느낌 |
|---|---|---|
| #DF4324 → #1B1A1E | #7D2F21 | 어두운 적갈색 |
| #FFFFFF → #000000 | #7F7F7F | 중간 회색 |
| #0000FF → #FFFF00 (파랑 → 노랑) | #80807F | 회색 |
| #FF0000 → #00FFFF (빨강 → 청록) | #7F8080 | 회색 |
| #FF0000 → #00FF00 (빨강 → 초록) | #7F8000 | 탁한 올리브색 |
브라우저는 빨강·초록·파랑 값을 각각 따로 평균해 중간색을 만듭니다. 그래서 파랑과 노랑처럼 서로 보색인 두 색을 이으면 가운데가 초록이 아니라 회색으로 가라앉습니다. 선명한 두 색을 이었는데 중간이 칙칙해 보인다면 이 때문입니다.
가운데에 색을 하나 더 넣으면
| 정지점 | 생성된 CSS | 가운데 색 |
|---|---|---|
| 파랑 0% · 흰색 50% · 노랑 100% | linear-gradient(90deg, #0000ff 0%, #ffffff 50%, #ffff00 100%) | #FFFFFF |
| 빨강 0% · 노랑 50% · 초록 100% | linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%) | #FFFF00 |
"+ 색 추가"로 넣은 정지점은 목록에서는 맨 아래에 붙지만, CSS 코드에는 위치(%) 순서로 정렬되어 들어갑니다. 빨강에서 초록으로 갈 때 가운데에 노랑을 넣으면 올리브색 구간 대신 선명한 노랑을 지나게 됩니다.
위치(%)를 옮기면
| 정지점 | 결과 |
|---|---|
| #DF4324 0% · #1B1A1E 30% | 앞쪽 30% 안에서 색이 다 바뀌고, 가운데(50%)는 이미 끝 색 #1B1A1E |
| 빨강 0% · 빨강 50% · 파랑 50% · 파랑 100% | 번짐 없이 정확히 절반에서 갈리는 두 색 띠 (25% 지점 #FF0000, 75% 지점 #0000FF) |
같은 위치에 서로 다른 색 두 개를 두면 그 지점에서 색이 뚝 끊깁니다. 줄무늬나 진행 막대처럼 경계가 또렷한 배경을 만들 때 쓰는 방법입니다. 원형 그라데이션에서는 0% 색이 한가운데, 100% 색이 가장자리에 옵니다.
- 은은한 배경엔 비슷한 색조: 명도만 살짝 다른 두 색(예: #F3EEE3 → #E2D9C7)으로 그라데이션을 만들면 눈에 거슬리지 않는 고급스러운 섹션 배경이 됩니다. 각도를 135°로 주면 자연광이 비치는 듯한 느낌을 줍니다.
- 버튼·배지 강조: 브랜드 색에서 약간 어두운 색으로 이어지는 선형 그라데이션을 버튼 배경에 쓰면 입체감이 생깁니다. 위치(%)를 조절해 색이 바뀌는 지점을 한쪽으로 몰면 광택 효과도 낼 수 있습니다.
- 원형으로 스포트라이트: 원형 그라데이션은 가운데가 밝고 가장자리가 어두운 조명 효과에 적합합니다. 히어로 영역이나 카드 뒤 배경에 깔면 시선을 중앙으로 모을 수 있습니다.
CSS 기준 0°는 아래에서 위로, 90°는 왼쪽에서 오른쪽으로 색이 진행됩니다. 180°는 위에서 아래, 45°는 왼쪽 아래에서 오른쪽 위 대각선 방향입니다. 미리보기를 보며 조절하면 직관적으로 맞출 수 있습니다.
네. "+ 색 추가"로 원하는 만큼 정지점을 추가할 수 있고, 각 색의 위치(%)를 지정해 무지개나 다단계 그라데이션도 만들 수 있습니다. 색 옆 삭제 버튼으로 다시 줄일 수도 있습니다.
선형은 직선 방향으로 색이 이어지며 각도로 방향을 정합니다. 원형은 중심에서 바깥으로 퍼져 가운데를 강조하는 스포트라이트·배경 효과에 적합합니다. 같은 색 조합이라도 종류만 바꾸면 전혀 다른 분위기를 낼 수 있으니 미리보기로 비교해 보세요.
색 차이가 큰 두 색을 좁은 범위에서 이으면 경계가 띠처럼 보이는 밴딩이 생깁니다. 색 정지점을 더 추가해 중간 색을 넣거나 색 차이를 줄이면 부드러워집니다. 비슷한 색조끼리 잇는 것이 가장 매끄럽습니다.
이 도구는 CSS 코드를 제공합니다. 이미지 파일이 필요하면 그 CSS를 적용한 화면을 캡처하거나, 디자인 툴에 같은 색·각도로 그라데이션을 다시 만들면 됩니다. 웹에서는 이미지보다 CSS 그대로 쓰는 것이 가볍고 선명합니다.