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