도구 실행
웹 디자인과 인터페이스 스타일링에 필요한 CSS 그라디언트 코드를 손쉽게 생성할 수 있는 온라인 도구입니다. 그라디언트 형태, 진행 방향, 색상 목록을 입력하면 웹 스타일시트에 바로 적용할 수 있는 CSS 코드가 만들어집니다. 그라디언트 형태에 linear를 지정하면 입력한 방향을 반영한 선형 그라디언트 코드가 생성되며, 그 외의 값을 지정하면 원형 스타일의 radial 그라디언트 코드가 생성됩니다. 쉼표로 구분하여 여러 색상 값을 입력할 수 있으며, 각 색상 항목의 앞뒤 공백은 깔끔하게 정리되어 출력됩니다. 기본값이 미리 채워져 있어 빠르게 시험해 볼 수 있습니다.
사용 방법
- 그라디언트 형태(linear 또는 radial)를 입력합니다.
- 선형 그라디언트에서 사용할 진행 방향(예: to right, to bottom, 45deg)을 입력합니다.
- 쉼표로 구분하여 사용할 색상 목록(예: #ff7e5f, #feb47b)을 입력합니다.
- 실행 버튼을 눌러 생성된 CSS 그라디언트 코드를 확인하고 복사하여 스타일에 적용합니다.
예시
- 선형 그라디언트: 형태에 'linear', 방향에 'to bottom', 색상에 '#4facfe, #00f2fe'를 입력하면 'linear-gradient(to bottom, #4facfe, #00f2fe)' 코드가 생성됩니다.
- 원형 그라디언트: 형태에 'radial', 색상에 '#ff9a9e, #fecfef'를 입력하면 원형 스타일의 'radial-gradient(circle, #ff9a9e, #fecfef)' 코드가 생성됩니다.
자주 묻는 질문
지원되는 그라디언트 형태에는 어떤 것이 있나요?
선형(linear) 및 원형(radial) 스타일을 지원합니다. 형태 입력란에 linear를 지정하면 선형 코드가 생성되고, 그 외의 텍스트를 입력하면 원형 그라디언트 코드가 출력됩니다.
색상은 몇 개까지 입력할 수 있나요?
쉼표로 구분하여 두 개 이상의 색상을 자유롭게 입력할 수 있습니다. 각 색상 앞뒤의 불필요한 공백은 자동으로 정돈되어 출력됩니다.
선형 그라디언트 방향은 어떻게 설정하나요?
'to right', 'to bottom', '135deg'와 같이 표준 CSS에서 사용하는 방향 키워드나 각도 단위를 입력하여 지정할 수 있습니다.
입력한 색상 코드의 문법 검사가 수행되나요?
색상 이름이나 16진수 코드에 대한 별도의 유효성 검증 없이 입력된 문자열을 결합하므로 표준 CSS 색상 표기법에 맞춰 정확히 입력해야 합니다.