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

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초만 투자하면 매번 다시 만들 필요가 없어집니다.

A 네, 애니메이션은 가능하지만 이 제너레이터가 애니메이션 코드를 직접 만들어주진 않습니다. 출력물은 정적인 background-image 속성입니다. 애니메이션을 적용하려면 @keyframes 규칙 안에 넣어 background-position을 움직이거나 시간에 따라 색상을 바꿔야 합니다. 일반적인 팁: 그라데이션 배경을 요소보다 3배 넓게 만든 다음 background-position을 0%에서 100%로 애니메이션 처리하세요. 부드러운 색상 웨이브가 완성됩니다. 로딩 스피너나 히어로 섹션에 아주 잘 어울립니다.

A 각도 슬라이더를 90도로 움직이면 그라데이션이 좌우에서 상하로 바뀝니다. 180도는 완전히 반전시킵니다. 대각선 효과는 45도나 135도를 시도해보세요. 히어로 섹션에서 자주 쓰입니다. 미리보기가 실시간으로 업데이트되므로 변경 사항을 즉시 확인할 수 있습니다. 색상 균형을 바꾸고 싶지 않다면 컬러 스톱을 건드릴 필요가 없습니다.

A 아니요, 이 도구는 CSS 코드만 생성합니다. 목업에는 미리보기 스크린샷을 찍거나 헥스 값을 디자인 툴에 직접 붙여넣으세요. Figma와 Sketch는 CSS 그라디언트를 기본 지원합니다. 래스터 이미지가 필요하면 각도를 180도로 설정하고 OS의 화면 캡처를 배율 200%로 사용하세요. 2배 크기의 선명한 UI 에셋이 나옵니다. 브라우저와 디자인 소프트웨어 간 색상이 정확히 일치하므로 목업 변형이 없습니다.

A 아니요, 이 도구는 background-image 선언 전체만 출력합니다. 하지만 수동으로 줄일 수 있어요. linear-gradient 뒤 괄호 안의 내용을 잘라서 `background: linear-gradient(...)`로 붙여넣으면 됩니다. 규칙당 약 30자를 절약할 수 있습니다. 빠른 목업이 필요하면 전체 코드를 CSS-to-JSON 변환기에 붙여넣는 디자이너도 많아요. 실용적인 팁: 전체 버전을 유지하세요. 읽기 쉽고 디버깅도 편합니다. 축약형은 바이트를 아끼고, 긴 버전은 골치 아픔을 아껴줍니다.