유형 선택
직선 방향의 선형 또는 중심에서 퍼지는 방사형을 고릅니다.
FREE CSS GRADIENT GENERATOR
무료 CSS 그라디언트 생성기
색상과 위치를 고르면 linear-gradient 또는 radial-gradient CSS를 바로 만들어 드립니다.
입력과 결과는 서버로 전송되거나 저장되지 않습니다.
- 1유형과 색상 설정
- 2미리보기 확인
- 3CSS 복사
1 · 유형과 색상 설정
그라디언트를 설정하세요
2 · 미리보기 확인
생성 결과
그라디언트 미리보기
불투명 sRGB HEX와 퍼센트 지점 기준입니다. 결과는 CSS 코드이며 이미지 파일은 만들지 않습니다.
무료 CSS 배경 만들기 가이드
색상 지점으로 자연스러운 배경을 만드세요
회원가입이나 설치 없이 선형·방사형 그라디언트를 무료로 생성합니다.색상과 위치 조절
2~5개 색상과 각 지점의 0~100% 위치를 정합니다.
CSS 복사
미리보기를 확인하고 완성된 background 선언을 복사합니다.
CSS 그라디언트 이해하기
색상 지점 사이를 브라우저가 채웁니다
이미지 파일 없이 CSS가 화면 크기에 맞춰 부드러운 색 변화를 렌더링합니다.
선형 그라디언트
각도로 색이 흐르는 직선 방향을 정합니다.
방사형 그라디언트
중심에서 바깥쪽으로 원형 또는 타원형 색이 퍼집니다.
CSS 한 줄
완성된 background 선언을 스타일시트에 붙여 넣습니다.
FREE CSS GRADIENT GENERATOR FAQ
CSS 그라디언트 생성기 자주 묻는 질문
무료 이용, 색상 지점과 지원 범위를 확인하세요.1그라디언트 생성기는 무료인가요?
네. 회원가입과 이용 횟수 제한 없이 무료로 운영됩니다.
2색상은 몇 개까지 넣을 수 있나요?
최소 2개에서 최대 5개 색상 지점을 사용할 수 있습니다.
3선형과 방사형을 모두 만들 수 있나요?
네. 각도가 있는 선형과 center 기준 원형·타원형 방사형을 지원합니다.
4이미지로 다운로드할 수 있나요?
현재 결과는 반응형 웹 배경에 적합한 CSS 코드이며 이미지 다운로드는 제공하지 않습니다.