브라우저 호환성은 어떤가요?

CSS linear-gradient와 radial-gradient는 모든 최신 브라우저에서 지원됩니다. IE 9 이하는 지원되지 않으니, 필요하면 fallback 배경색을 함께 설정하세요.

색상 코드를 직접 입력할 수 있나요?

네, 컬러 피커 외에 HEX 코드를 직접 입력해서 정확한 색상을 지정할 수 있습니다.

CSS 스펙상 제한은 없지만, 보통 2~5개 색상이 가장 자연스럽습니다. 너무 많으면 오히려 지저분해질 수 있습니다.

선형/원형 그라디언트 시각 편집, CSS 코드 복사

프리셋

타입

각도135°

색상 (2/8)

#667eea0%

#764ba2100%

CSS

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

CSS 그라디언트를 코드로 직접 작성하면 색상 조합이나 각도를 바꿀 때마다 새로고침해야 해서 번거롭다. 이 도구는 색상 스톱, 방향, 타입(linear/radial)을 마우스로 조절하면서 결과를 실시간으로 확인할 수 있고, 완성된 CSS 코드를 바로 복사할 수 있다.

브라우저 호환성은 어떤가요?: CSS linear-gradient와 radial-gradient는 모든 최신 브라우저에서 지원됩니다. IE 9 이하는 지원되지 않으니, 필요하면 fallback 배경색을 함께 설정하세요.
색상 코드를 직접 입력할 수 있나요?: 네, 컬러 피커 외에 HEX 코드를 직접 입력해서 정확한 색상을 지정할 수 있습니다.
그라디언트에 색상을 몇 개까지 넣을 수 있나요?: CSS 스펙상 제한은 없지만, 보통 2~5개 색상이 가장 자연스럽습니다. 너무 많으면 오히려 지저분해질 수 있습니다.

CSS 그라디언트 생성기