사용법
- "선형" 또는 "원형" 그라데이션 종류를 고릅니다. 선형은 각도로 방향을, 원형은 중심에서 퍼지는 형태입니다.
- "+ 색 추가"로 정지점을 늘리고, 각 색상과 위치(%)를 조절합니다. 두 개 이상부터 그라데이션이 만들어집니다.
- 위쪽 미리보기에서 결과를 실시간으로 확인합니다.
- 완성되면 "CSS 복사"로 background 속성 코드를 복사해 스타일시트에 붙여넣습니다.
CSS 그라데이션의 구성 요소
CSS 그라데이션은 색을 부드럽게 이어 붙인 배경입니다. 세 가지만 정하면 됩니다: 종류, 방향, 색 정지점.
- 종류: 선형(linear)은 직선 방향, 원형(radial)은 중심에서 퍼짐.
- 방향: 선형은 각도(deg), 원형은 중심 위치로 정합니다.
- 색 정지점(color stop): 각 색과 위치(%)를 지정해 색이 바뀌는 지점을 조절합니다.
이미지가 아니라 코드라 용량이 0이고 어느 해상도에서도 깨지지 않습니다. 문법·배색은 CSS 그라데이션 가이드에 정리했습니다.
활용 팁
- 은은한 배경엔 비슷한 색조: 명도만 살짝 다른 두 색(예: #F3EEE3 → #E2D9C7)으로 그라데이션을 만들면 눈에 거슬리지 않는 고급스러운 섹션 배경이 됩니다. 각도를 135°로 주면 자연광이 비치는 듯한 느낌을 줍니다.
- 버튼·배지 강조: 브랜드 색에서 약간 어두운 색으로 이어지는 선형 그라데이션을 버튼 배경에 쓰면 입체감이 생깁니다. 위치(%)를 조절해 색이 바뀌는 지점을 한쪽으로 몰면 광택 효과도 낼 수 있습니다.
- 원형으로 스포트라이트: 원형 그라데이션은 가운데가 밝고 가장자리가 어두운 조명 효과에 적합합니다. 히어로 영역이나 카드 뒤 배경에 깔면 시선을 중앙으로 모을 수 있습니다.
자주 묻는 질문
Q. 각도 0°와 90°는 어느 방향인가요?
CSS 기준 0°는 아래에서 위로, 90°는 왼쪽에서 오른쪽으로 색이 진행됩니다. 180°는 위에서 아래, 45°는 왼쪽 아래에서 오른쪽 위 대각선 방향입니다. 미리보기를 보며 조절하면 직관적으로 맞출 수 있습니다.
Q. 색을 3개 이상 넣을 수 있나요?
네. "+ 색 추가"로 원하는 만큼 정지점을 추가할 수 있고, 각 색의 위치(%)를 지정해 무지개나 다단계 그라데이션도 만들 수 있습니다. 색 옆 삭제 버튼으로 다시 줄일 수도 있습니다.
Q. 선형(linear)과 원형(radial) 그라데이션은 어떻게 다른가요?
선형은 직선 방향으로 색이 이어지며 각도로 방향을 정합니다. 원형은 중심에서 바깥으로 퍼져 가운데를 강조하는 스포트라이트·배경 효과에 적합합니다. 같은 색 조합이라도 종류만 바꾸면 전혀 다른 분위기를 낼 수 있으니 미리보기로 비교해 보세요.
Q. 그라데이션이 띠처럼 끊겨 보여요(밴딩).
색 차이가 큰 두 색을 좁은 범위에서 이으면 경계가 띠처럼 보이는 밴딩이 생깁니다. 색 정지점을 더 추가해 중간 색을 넣거나 색 차이를 줄이면 부드러워집니다. 비슷한 색조끼리 잇는 것이 가장 매끄럽습니다.
Q. 만든 그라데이션을 이미지로 저장할 수 있나요?
이 도구는 CSS 코드를 제공합니다. 이미지 파일이 필요하면 그 CSS를 적용한 화면을 캡처하거나, 디자인 툴에 같은 색·각도로 그라데이션을 다시 만들면 됩니다. 웹에서는 이미지보다 CSS 그대로 쓰는 것이 가볍고 선명합니다.
함께 쓰면 좋은 도구