두 색상과 각도로 CSS 그라디언트 만드는 방법

두 색상과 선택적인 각도를 입력하면 선형 또는 방사형 CSS 그라디언트 텍스트를 만들 수 있습니다. 유형을 생략하면 선형 형식이 사용되고, radial을 정확히 입력하면 원형 방사형 형식이 생성됩니다.

무엇을 만들 수 있나요?

두 색상 사이의 전환을 웹 페이지에 넣을 CSS 텍스트로 준비하려면 이 도구를 사용할 수 있습니다. 두 색상 값을 바탕으로 선형 또는 방사형 그라디언트 형식의 CSS 텍스트를 생성합니다. 선형 형식에서는 각도가 함께 사용되므로 색상 조합뿐 아니라 전환 방향도 지정할 수 있습니다. 방사형 형식에서는 두 색상을 이용한 원형 방사형 전환을 만들 수 있습니다.

간단한 시안에서 색상 조합을 비교하거나, 이미 정한 색상 값을 CSS에 넣을 표현으로 정리할 때 활용하기 좋습니다. 결과는 색상 견본을 편집하는 화면이 아니라 CSS 그라디언트 텍스트입니다. 따라서 결과를 확인한 뒤 웹 페이지의 스타일에 붙여 넣을 때는 해당 텍스트가 들어갈 위치와 주변 CSS 문맥을 함께 살펴보세요.

색상 두 개와 유형, 각도를 입력하는 방식이 기본 사용 흐름입니다. 값을 생략했을 때 적용되는 기본값도 있으므로, 빠르게 기본 결과를 확인한 다음 필요한 부분만 바꾸는 방법도 가능합니다. 다만 입력한 색상 값은 별도의 색상 유효성 검사 없이 결과 텍스트에 들어가므로, 실제로 사용할 표기인지 직접 확인해야 합니다.

입력부터 결과 확인까지

1. 첫 번째 색상과 두 번째 색상을 입력합니다. 두 색상 값을 모두 직접 정할 수도 있고, 값을 입력하지 않은 상태에서 기본 결과를 확인할 수도 있습니다. 첫 번째 색상을 생략하면 #ff6b6b, 두 번째 색상을 생략하면 #4ecdc4가 사용됩니다. 한 색상만 입력한 경우에는 입력하지 않은 쪽에 해당 기본값이 적용됩니다.

2. 그라디언트 유형을 정합니다. 유형을 지정하지 않으면 기본적으로 선형 형식이 사용됩니다. 선형 결과를 원한다면 linear를 사용하고, 원형 방사형 결과를 원한다면 radial을 정확히 입력합니다. 유형을 고르는 입력란이 있다면 선형 또는 방사형에 해당하는 값을 선택하고, 직접 값을 입력하는 방식이라면 철자와 대소문자를 확인하세요.

3. 선형 그라디언트에 사용할 각도를 입력합니다. 각도를 생략하면 45도가 사용됩니다. 숫자로 바꿀 수 있는 값은 정수로 변환된 뒤 360을 기준으로 정리됩니다. 예를 들어 120과 같이 숫자로 입력하면 그 값이 선형 결과의 각도로 반영됩니다. 숫자로 변환할 수 없는 값은 45도로 처리되므로, 방향을 정하려면 숫자 각도를 입력하는 편이 알맞습니다.

4. 방사형 결과가 필요하면 유형 값으로 radial을 정확히 사용합니다. 이 경우 두 색상을 이용한 원형 방사형 그라디언트 형식이 생성됩니다. 방사형 형식에는 선형 형식처럼 각도에 따른 방향을 해석하는 방식이 적용되지 않으므로, 결과를 볼 때는 각도보다 두 색상이 원형 전환에 사용되었는지를 확인하세요.

5. 생성을 실행하고 반환된 CSS 그라디언트 텍스트를 확인합니다. 선형 결과라면 입력한 각도와 두 색상 값이 텍스트에 들어갔는지 살펴봅니다. 방사형 결과라면 원형 방사형 형식과 두 색상 값이 포함되었는지 확인합니다. 결과를 사용하기 전에 색상 값이 CSS에서 사용할 표기인지 직접 점검하고, 필요한 CSS 속성의 값으로 옮깁니다.

6. 결과가 예상과 다르면 먼저 생략된 입력이 있는지 확인합니다. 색상 입력을 빠뜨리면 해당 위치에 기본 색상이 들어가고, 유형을 빠뜨리면 선형 형식이 사용됩니다. 각도가 빠졌거나 숫자로 변환되지 않았다면 45도가 적용됩니다. 이 기본값을 원하지 않는다면 값을 명시한 뒤 다시 생성하세요.

결과를 읽는 방법과 범위

선형 결과에서는 입력한 각도가 CSS 텍스트에 도 단위로 반영되고, 두 색상 값이 선형 그라디언트의 색상 값으로 사용됩니다. 따라서 색상 순서와 각도를 함께 확인해야 합니다. 예를 들어 첫 번째 색상에 #3366ff, 두 번째 색상에 #ffcc00, 유형에 linear, 각도에 120을 입력하면 결과에는 120도와 두 색상을 포함한 선형 그라디언트 텍스트가 나타나는 형태입니다. 이 설명은 결과의 형태를 보여 주는 것이며, 여기서 특정 완성 문자열을 단정하는 것은 아닙니다.

방사형 결과에서는 유형 값이 정확히 radial일 때 두 색상을 사용하는 원형 방사형 그라디언트 형식이 생성됩니다. 선형 결과처럼 각도가 방향을 정하는 결과를 기대하기보다, 방사형 형식이 사용되었는지와 두 색상이 들어갔는지를 확인하세요. 유형을 생략한 결과가 선형으로 나오는 것은 기본 유형이 선형이기 때문입니다.

linear와 radial 이외의 유형 값을 입력하면 별도의 새로운 그라디언트 형식이 만들어지지 않습니다. 해당 값은 선형 그라디언트 형식으로 대체되며, 입력한 유형 값 자체는 반환된 데이터에 남을 수 있습니다. 그러므로 선형이 아닌 결과를 기대했는데 선형 형식이 나타나면 입력한 유형의 철자와 값이 radial인지 먼저 확인하세요.

각도는 입력한 모양 그대로만 사용되는 것이 아닙니다. 숫자로 변환된 뒤 정수로 바뀌고 360을 기준으로 정리되며, 숫자로 변환할 수 없으면 45도로 돌아갑니다. 이 처리 때문에 큰 수나 음수를 입력했을 때 표시되는 각도가 입력 문자열과 다를 수 있습니다. 방향을 비교할 때는 최종 결과에 반영된 정수 각도를 기준으로 살펴보세요.

이 도구가 확인해 주는 것은 CSS 그라디언트 텍스트의 생성 방식입니다. 입력한 색상 값이 실제 CSS 색상으로 유효한지 별도로 검사하지 않으므로, 색상 이름이나 코드의 문법까지 자동으로 보장한다고 해석해서는 안 됩니다. 결과를 프로젝트에 적용하기 전 사용 환경에서 색상 표기를 확인하고, 의도한 전환이 나타나는지도 점검하세요.

사용 예시

두 색상으로 웹 페이지의 강조 영역에 사용할 파란색에서 노란색으로 이어지는 선형 전환을 준비합니다.

첫 번째 색상에 #3366ff, 두 번째 색상에 #ffcc00, 유형에 linear, 각도에 120을 입력한 뒤 생성 결과를 확인합니다.

입력한 두 색상과 120도를 포함한 선형 그라디언트 텍스트 형태의 결과가 나옵니다.

제한 사항

• 입력한 색상 값은 별도의 색상 유효성 검사 없이 결과 텍스트에 삽입되므로, 사용 전에 CSS에서 사용할 수 있는 표기인지 직접 확인해야 합니다.

자주 발생하는 오류

• 유형을 방사형으로 지정했는데 선형 결과가 나오면 입력한 값이 정확히 radial인지 확인하세요. linear와 radial 이외의 값은 선형 그라디언트 형식으로 처리되므로, 유형 값을 수정한 뒤 다시 생성해야 합니다.

자주 묻는 질문

색상을 입력하지 않아도 되나요?

입력하지 않은 색상에는 기본값이 적용됩니다. 첫 번째 색상을 생략하면 #ff6b6b, 두 번째 색상을 생략하면 #4ecdc4가 사용되므로, 원하는 색상이 있다면 두 값을 직접 입력하세요.

방사형 그라디언트는 어떻게 만드나요?

유형을 지정하지 않으면 선형 형식이 사용됩니다. 원형 방사형 결과가 필요할 때는 유형 값으로 radial을 정확히 입력해야 하며, 다른 값은 선형 형식으로 대체됩니다.

각도에는 어떤 값이 사용되나요?

각도를 생략하면 45도가 사용됩니다. 숫자로 변환할 수 있는 입력은 정수로 바뀐 뒤 360을 기준으로 정리되고, 숫자로 변환할 수 없는 입력은 45도로 처리됩니다.