CSS는 어떻게 사용하나요?

색을 입힐 요소의 규칙에 붙여 넣으세요. 첫 줄은 단색 대체 값이고, 두 번째 줄이 그라데이션입니다.

선형, 원형, 원뿔형은 어떻게 다른가요?

선형은 직선을 따라 섞이고, 원형은 중심에서 바깥으로 퍼지며, 원뿔형은 색상환처럼 중심을 빙 둘러 돕니다.

네. 지점에 rgba(47, 91, 255, 0.5) 같은 색을 입력하세요.

아니요. 그라데이션은 내 기기에서 만들어집니다.

네. 가입이나 설치 없이 무료로 사용할 수 있습니다.

무료, 가입 불필요, 브라우저에서 작동합니다. 최대 8개의 색상 지점으로 선형, 원형, 원뿔형 그라데이션을 디자인하고 실시간으로 확인한 뒤 CSS를 복사하세요. 흔히 쓰는 크기의 PNG 배경으로도 다운로드할 수 있습니다.

유형

선형원형원뿔형

방향 135°

background: #ff7ac6;
background: linear-gradient(135deg, #ff7ac6 0%, #ffe14d 100%);

이미지 크기

첫 줄은 그라데이션을 표시할 수 없는 아주 오래된 기기를 위한 단색입니다.

내 기기에서 만들어집니다.

CSS는 어떻게 사용하나요?: 색을 입힐 요소의 규칙에 붙여 넣으세요. 첫 줄은 단색 대체 값이고, 두 번째 줄이 그라데이션입니다.
선형, 원형, 원뿔형은 어떻게 다른가요?: 선형은 직선을 따라 섞이고, 원형은 중심에서 바깥으로 퍼지며, 원뿔형은 색상환처럼 중심을 빙 둘러 돕니다.
투명도를 쓸 수 있나요?: 네. 지점에 rgba(47, 91, 255, 0.5) 같은 색을 입력하세요.
업로드되는 것이 있나요?: 아니요. 그라데이션은 내 기기에서 만들어집니다.
CSS 그라데이션 생성기은(는) 무료인가요?: 네. 가입이나 설치 없이 무료로 사용할 수 있습니다.