Gradient Maker - 시각적 CSS 그라데이션 편집기
선형·방사형 그라데이션 시각적 에디터. 색상 중지점 추가, 각도 조정, 실시간 미리보기, CSS 원클릭 복사.
프리셋
CSS 그라데이션 시각적으로 만들기
랜딩 페이지 헤더 배경에 예쁜 그라데이션 넣고 싶은데, linear-gradient() 문법을 머릿속으로 상상하면서 코드를 짜기가 쉽지 않아요. 각도가 45도냐 135도냐, 색깔을 몇 %에서 전환해야 자연스러운지 숫자로만 보면 감이 안 오거든요.
여기선 색 고르고 슬라이더로 위치 끌고 각도 돌리면 그 결과가 바로 화면에 보여요. 선형(linear) 그라데이션은 각도, 방사형(radial)은 중심점이랑 모양을 조절할 수 있고요. 마음에 들면 복사 버튼 한 번으로 바로 쓸 수 있는 CSS 코드가 나옵니다.
이런 분들한테 유용해요
웹사이트 배경 꾸미려는 웹 디자이너, 발표자료 슬라이드 배경 만드는 기획자, CSS 자세히 모르지만 그라데이션은 필요한 비개발자요.
CSS 그라데이션 만드는 법
- 유형 선택 - 선형(linear) 또는 방사형(radial).
- 방향 설정 - 선형은 각도, 방사형은 중심점 조절.
- 색상 중지점 편집 - 색 바꾸거나 위치 슬라이더 드래그.
- 중지점 추가 - 복잡한 그라데이션 만들려면 '+ 중지점' 클릭(최대 8개).
- CSS 복사 - 복사 버튼 누르면 코드가 클립보드로.
실제 사용 예시
랜딩 페이지 히어로 배경:
유형: 선형 | 각도: 180°
#ff6b6b (0%) → #feca57 (50%) → #48dbfb (100%)
→ CSS 복사:
background: linear-gradient(180deg, #ff6b6b, #feca57, #48dbfb);
→ 바로 적용이 Gradient Maker의 특징
- 시각적 편집 - 조절하는 대로 실시간으로 그라데이션이 반영돼요.
- 선형·방사형 둘 다 - 각 유형 전용 조작 도구 완비.
- 중지점 최대 8개 - 복잡한 그라데이션도 섬세하게.
- 프리셋 8종 - 감각적인 그라데이션 시작점 제공.
- 원클릭 CSS - 바로 쓸 수 있는 CSS 복사.
- 한계점 - 색상 중지점은 최대 8개까지예요. 애니메이션 그라데이션이나 메시 그라데이션(mesh gradient)은 지원 안 합니다.
다른 그라데이션 도구랑 비교
| 기능 | FreeToolbox | cssgradient.io | WebGradients |
|---|---|---|---|
| 실시간 미리보기 | 예 | 예 | 정적만 |
| 색상 중지점 | 최대 8개 | 제한 없음 | 2개 고정 |
| 방사형 지원 | 예 | 예 | 아니요 |
| 프리셋 | 8개 | 없음 | 180개 |
| 광고 | 거의 없음 | 보통 | 거의 없음 |
참고 자료
- MDN: linear-gradient() - CSS 선형 그라디언트 문법
자주 묻는 질문
선형이랑 방사형, 뭐가 달라요?
선형(linear)은 직선 방향으로 색이 전환돼요. 각도를 0도로 하면 위에서 아래로, 90도면 왼쪽에서 오른쪽 같은 식이죠. 방사형(radial)은 한 점에서 원형으로 퍼져나가는 형태라서 스포트라이트 같은 느낌을 낼 수 있어요.
색상 중지점은 몇 개까지 넣어요?
최대 8개까지요. 최소 2개는 있어야 그라데이션이 되고, '+ 중지점 추가' 버튼으로 필요할 때마다 더할 수 있어요.
중지점 제거 가능해요?
네, 최소 2개가 남아 있는 한 각 중지점 옆의 × 버튼을 눌러 빼낼 수 있습니다.
프리셋은 어떻게 써요?
하단의 프리셋 썸네일을 클릭하면 그 프리셋 색상이 로드되고 선형 135°로 설정돼요. 그 상태에서 각도나 색상을 더 조정하면서 커스터마이징할 수 있습니다.
크로스 브라우저 대응 되나요?
네, 표준 CSS gradient 문법을 쓰기 때문에 Chrome, Firefox, Safari, Edge 다 문제없이 동작해요. 별도의 벤더 프리픽스(-webkit-, -moz-)는 필요 없습니다.