CSS 그라디언트 생성기 무료 온라인: 선형 방사형 그라데이션 만들기

A 유형(선형/방사형) 선택, 색상 선택, 각도 조절, CSS 코드 복사.

A 선형(직선 방향)과 방사형(중앙에서). 다중 색상 지원.

A 네, 추가 색상 정지점으로 복잡한 그라디언트.

A 선형 그라데이션은 직선(가로, 세로 또는 대각선)으로 흐릅니다. 각도 슬라이더로 방향을 제어할 수 있으며, 예를 들어 90도로 설정하면 수직 페이드가 됩니다. 방사형 그라데이션은 중심점에서 바깥쪽으로 확장되어 원형 또는 타원형 효과를 만듭니다. 이 도구로는 원형 외의 모양을 직접 제어할 수 없지만, 중심점을 선택할 수는 있습니다.

A 이 도구는 Chrome, Firefox, Safari, Edge에서 작동하는 표준 CSS를 생성합니다. Internet Explorer 9 이하에서는 그래디언트가 표시되지 않지만, 이는 전 세계 트래픽의 1% 미만입니다. 오래된 브라우저를 위해 CSS 그래디언트 속성 앞에 단색 배경색을 폴백으로 추가하세요. 그래디언트가 지원되지 않을 때 사용자에게 평면 색상이 보입니다. 빠른 테스트: 코드를 최신 브라우저의 개발자 도구에 붙여넣어 확인해보세요.

A 줄무늬 현상은 색상 전환이 부드럽지 않고 띠 모양으로 나타날 때 발생합니다. 보통 그라데이션이 너무 많은 픽셀을 커버하면서 색상 중지점이 충분하지 않기 때문입니다. 전체 너비 히어로 섹션에서는 두 기본 색상 중간에 세 번째 색상 중지점을 추가해보세요. 1920픽셀 이상의 큰 배경에서는 background-attachment: fixed를 설정하면 시각적 줄무늬를 줄일 수 있습니다. 이 도구는 깔끔한 코드를 생성하지만 브라우저 렌더링에는 한계가 있습니다. 간단한 해결책: 밝기가 비슷한 색상을 사용하면 전환이 부드러워집니다.

A 그라데이션은 시스템 고대비 설정을 따르지만, 도구가 이를 시뮬레이션하지는 않습니다. 대비 문제는 파스텔 노랑과 연한 분홍처럼 명도가 비슷한 두 색상에서 자주 발생합니다. 간단한 확인법: 두 Hex 코드를 HSL로 변환한 후 L 값이 최소 30포인트 차이 나는지 확인하세요. 히어로 섹션의 경우 Windows 고대비 모드나 Axe 같은 브라우저 확장 프로그램으로 테스트해보세요. 12개의 프리셋은 접근성을 고려해 선정되었지만, 사용자 정의 색상은 본인 책임입니다.

A 현재 버전에는 저장 기능이 없습니다. 대신 생성된 CSS를 텍스트 파일, CodePen 스니펫, 또는 브라우저 개발자 도구의 스니펫 패널에 복사해두세요. 많은 디자이너들이 프로젝트 폴더에 "gradients.css" 파일을 만들어 즐겨찾는 5~10개를 보관합니다. 처음 10초만 투자하면 매번 다시 만들 필요가 없어집니다.