CSS 그라디언트 생성기
두 가지 색상과 각도, 그라디언트 유형을 설정하여 웹 디자인에 바로 사용할 수 있는 CSS 선형 및 원형 그라디언트 코드를 생성하는 온라인 도구입니다.
도구 실행
CSS 그라디언트 생성기는 웹 페이지와 인터페이스 디자인에 적용할 수 있는 CSS 그라디언트 코드를 손쉽게 구성하는 도구입니다. 시작 색상과 끝 색상, 회전 각도, 그라디언트 유형을 입력하면 선형 또는 원형 그라디언트 코드가 생성됩니다. 선형 그라디언트는 0도에서 359도 범위의 각도를 반영하며, 원형 그라디언트를 지정하면 중앙에서 퍼지는 원형 배경 코드를 만듭니다. 별도의 색상 값을 지정하지 않으면 기본 색상과 기본 각도가 자동으로 적용됩니다. 생성된 스타일 코드를 웹 스타일시트에 복사하여 배경 서식으로 즉시 활용할 수 있습니다.
사용 방법
- 첫 번째 색상 항목에 시작 색상 코드(예: #ff6b6b)를 입력하거나 색상 선택기를 사용합니다.
- 두 번째 색상 항목에 끝 색상 코드(예: #4ecdc4)를 입력합니다.
- 각도 항목에 선형 그라디언트의 회전 각도(0-359도)를 숫자로 지정합니다.
- 그라디언트 유형에 선형 또는 원형을 입력합니다.
- 실행 버튼을 클릭하여 결과 영역에 생성된 CSS 그라디언트 코드를 확인합니다.
예시
- 첫 번째 색상에 #ff6b6b, 두 번째 색상에 #4ecdc4, 각도에 45, 유형에 선형을 입력하면 linear-gradient(45deg, #ff6b6b, #4ecdc4) 스타일 코드가 생성됩니다.
- 첫 번째 색상에 #1e3c72, 두 번째 색상에 #2a5298, 유형에 원형을 입력하면 radial-gradient(circle, #1e3c72, #2a5298) 원형 그라디언트 코드가 생성됩니다.
자주 묻는 질문
각도 입력값이 360도를 넘어가면 어떻게 처리됩니까?
각도는 정수로 변환된 후 360으로 나눈 나머지 값이 적용됩니다. 예를 들어 405도를 입력하면 45도로 자동 계산됩니다.
그라디언트 유형에 선형이나 원형 이외의 값을 입력하면 어떻게 됩니까?
선형 또는 원형 이외의 텍스트를 입력하면 선형 그라디언트 형식으로 처리되어 코드가 생성됩니다.
입력한 색상 문자열이 올바른 CSS 형식인지 검증합니까?
입력된 색상 문자열은 별도의 형식 검증 없이 생성되는 CSS 코드에 그대로 삽입되므로, HEX나 RGB 등 올바른 CSS 색상 표기법을 입력해야 합니다.