CSS 그라데이션 생성기
선형 및 방사형 그라데이션을 시각적으로 디자인한 다음 바로 사용할 수 있는 CSS를 복사하세요. 모든 것이 브라우저에서 실시간으로 업데이트됩니다.
CSS 그라데이션을 만드는 방법
- 선형 또는 방사형을 선택한 다음 선형 그라데이션의 각도를 설정하세요.
- 정지점의 색상을 선택하고 각 위치를 0에서 100까지 설정하세요.
- 원하는 대로 전환을 만들기 위해 정지점을 추가하거나 제거하세요.
- 생성된 CSS를 스타일시트 또는 스타일 속성에 복사하세요.
자주 묻는 질문
선형 그라데이션이란 무엇인가요?
선형 그라데이션은 선택한 각도(0도에서 360도)의 직선을 따라 색상을 혼합합니다.
방사형 그라데이션이란 무엇인가요?
방사형 그라데이션은 중심점에서 원형 또는 타원형으로 바깥쪽을 향해 색상을 혼합합니다.
위치 숫자는 무엇을 의미하나요?
각 위치는 그라데이션을 따른 백분율로, 시작이 0%이고 끝이 100%입니다. 정지점은 위치에 따라 자동으로 정렬됩니다.
그라데이션이 모든 브라우저에서 작동하나요?
네. 생성된 CSS는 모든 최신 브라우저가 지원하는 표준 linear-gradient 및 radial-gradient 함수를 사용합니다.
관련 도구
그라데이션 생성기를 사용하는 이유
CSS 그라데이션 생성기를 사용하면 코드에서 값을 추측하지 않고 시각적으로 부드러운 색상 전환을 디자인하고, 바로 프로덕션에 사용할 수 있는 CSS를 즉시 복사할 수 있습니다.
- 색상, 각도 및 정지점을 조절하는 동안 그라데이션이 실시간으로 바뀌는 것을 확인하세요.
- 구문 오류를 찾지 않고 정확하고 유효한 CSS를 복사하세요.
- 버튼, 배너 및 섹션용 다중 정지점 배경을 몇 초 만에 만드세요.
팁 및 제한
색상 정지점을 원하는 만큼 추가할 수 있으며, 생성기는 그라데이션이 항상 유효하도록 최소 두 개를 유지합니다. CSS가 생성되기 전에 정지점이 위치에 따라 정렬됩니다.