본문으로 바로가기

CSS 그라데이션 생성기

두 색상으로 선형 또는 원형 CSS 그라데이션을 만듭니다.

135°

CSS 코드

background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);

CSS 그라데이션 생성기 소개

시작 색상과 끝 색상을 선택하고 각도를 조절해 CSS linear-gradient 또는 radial-gradient 코드를 생성합니다. 결과를 실시간으로 미리 보고 복사해 웹 디자인과 프로토타이핑에 바로 사용하세요.

사용 예시

파란색 브랜드 배경

Cobin 블루에서 보라색으로 이어지는 대각선 배경을 만듭니다.

입력
135°, #2563EB → #7C3AED
결과
linear-gradient(135deg, #2563EB 0%, #7C3AED 100%)

원형 빛 효과

중앙에서 바깥쪽으로 퍼지는 원형 그라데이션을 만듭니다.

입력
radial, #FFFFFF → #2563EB
결과
radial-gradient(circle, #FFFFFF 0%, #2563EB 100%)

자주 묻는 질문

선형과 원형 그라데이션은 어떻게 다른가요?

선형은 지정한 각도를 따라 색상이 직선으로 변하고, 원형은 중심에서 바깥 방향으로 둥글게 퍼집니다.

생성한 코드는 어디에 사용하나요?

복사한 background 선언을 CSS 선택자, 인라인 스타일 또는 디자인 시스템의 배경 스타일에 붙여 넣으면 됩니다.

색상 정보가 서버에 저장되나요?

아니요. 색상 조합과 CSS 생성은 모두 현재 브라우저에서 처리되며 서버에 저장되지 않습니다.