미리보기
그라디언트 유형
색상 중지점
프리셋
CSS 코드
복사됨!
CSS 그라디언트 생성기
linear-gradient / radial-gradient를 슬라이더로 조립하고 CSS만 복사해가기.
쓰는 법
- 선형(linear) / 방사형(radial) 중 타입 선택.
- 색상 중지점 추가해서 원하는 색 고르기 (최대 8개).
- 슬라이더로 각 색상 위치(0% ~ 100%) 조정.
- 선형이면 각도 슬라이더로 방향 정하기 (0~360°).
- 아래 CSS 코드창에서 복사 한 번.
예시
타입: 선형 | 각도: 135°
색상1: #667eea (0%)
색상2: #764ba2 (100%)
결과:
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);그라디언트 문법, 외우지 말고 드래그로 만들기
linear-gradient(135deg, #667eea 0%, #764ba2 100%)... 매번 이거 직접 타이핑하려면 각도 감도 안 오고 색상 위치도 긴가민가하죠. 여기는 색상 선택기로 색 고르고 슬라이더로 위치 잡으면 CSS가 실시간으로 쓰여져요. 선형(방향성)이랑 방사형(원형) 둘 다 됩니다.
이럴 때 쓰시면 좋아요
버튼이나 카드 배경 꾸밀 때, 히어로 섹션 배경 만들 때, 포토샵 없이 CSS만으로 색 전환 효과 주고 싶을 때요.
여기 쓰기 편한 점
- 색 바꾸자마자 미리보기가 업데이트돼서 감 잡기 쉬워요.
- 중지점을 최대 8개까지 넣을 수 있어서 복잡한 멀티컬러 그라디언트도 만들 수 있어요.
- 프리셋 6종 기본 제공. 그대로 쓰거나 살짝 수정해서 쓰시면 됩니다.
- 최신 표준 문법만 뽑아서 별도 벤더 프리픽스 없이 바로 붙여 쓸 수 있어요.
- 회원가입 같은 거 없고, 모든 처리는 브라우저 안에서 돌아갑니다.
- 한계: conic-gradient(원뿔형)는 지원 안 해요. 그건 직접 CSS 작성하셔야 합니다.
다른 그라디언트 도구랑 비교
| 항목 | 사장나라 | cssgradient.io | WebGradients |
|---|---|---|---|
| linear + radial | 둘 다 | 둘 다 | linear만 |
| 중지점 개수 | 최대 8개 | 무제한 | 2개 고정 |
| 프리셋 | 6종 | 없음 | 180종 |
| 광고 | 거의 없음 | 많음 | 보통 |
더 파보고 싶다면
- MDN: CSS gradient - 공식 문서
자주 묻는 질문
방사형 그라디언트도 돼요?
네, 상단 탭에서 linear / radial 전환하시면 됩니다. radial은 중심에서 바깥쪽으로 퍼지는 원형 그라디언트를 만들어요.
중지점 몇 개까지 넣을 수 있나요?
최대 8개요. 각 중지점마다 색상 선택기랑 위치(%) 슬라이더가 따로 있어서 세밀하게 조정 가능합니다.
벤더 프리픽스(-webkit-, -moz-) 붙여주나요?
최신 브라우저는 전부 표준 문법을 지원해서 프리픽스 없이도 잘 작동해요. IE11 같은 구형 브라우저 대응이 필요하면 Autoprefixer 같은 도구를 따로 쓰시는 걸 추천합니다.
만든 그라디언트를 저장할 수 있나요?
생성된 CSS 코드를 복사해서 프로젝트에 저장하시는 방식이에요. 계정 기반 저장은 없어서 서버에 데이터가 안 남습니다.
무료예요?
네, 전부 무료고 가입 필요 없어요.