CSS 그라디언트 생성기
CSS 그라디언트를 시각적으로 생성. 선형, 방사형, 원뿔형 세 가지 유형. 각도, 위치, 최대 6개의 색상 정지점을 실시간 미리보기로 조정. 무료 온라인 CSS 그라디언트 생성기.
사용 방법
- 상단 탭을 사용하여 그라디언트 유형을 선택합니다——선형, 방사형, 또는 원뿔형.
- 선형: 각도 슬라이더를 드래그하거나 0~360도 값을 입력합니다. 방향 버튼(위 / 오른쪽 / 아래 / 왼쪽)을 빠른 설정 단축키로 사용할 수 있습니다.
- 방사형: 드롭다운에서 모양(원형 또는 타원)과 중심 위치를 선택합니다.
- 원뿔형: 슬라이더로 시작 각도를 설정하고 중심 위치를 선택합니다.
- 색상 정지점 섹션에서 색상 견본을 클릭하거나 16진수 값을 입력하여 각 정지점의 색상을 변경합니다. 퍼센트를 조정하여 그라디언트 내 위치를 제어합니다.
- + 추가를 클릭하여 정지점 추가(최대 6개), 또는 ×로 제거(최소 2개 유지)합니다.
- 미리보기 사각형이 변경에 따라 실시간으로 업데이트됩니다.
- 복사를 클릭하여 CSS 규칙을 클립보드에 복사합니다.
생성된 CSS 이해하기
출력은 .gradient 클래스에 background 속성을 설정합니다. 선형 그라디언트에서 각도는 방향을 제어합니다——0deg는 위에서 아래로, 90deg는 왼쪽에서 오른쪽으로입니다.
방사형 그라디언트에서는 색상 목록 앞에 형태와 위치가 지정됩니다. 원뿔형 그라디언트에서 from은 시작 각도를, at은 스윕 중심을 설정합니다.
주요 사용 사례
CSS 그라디언트는 히어로 섹션 배경, 카드 헤더, 버튼 채우기, 진행 표시줄, 장식 오버레이, 텍스트 채우기 효과(background-clip: text)에 사용됩니다.
원뿔형 그라디언트는 순수 CSS로 파이 차트와 색상환 선택기를 렌더링하는 데 특히 유용합니다.
FAQ
선형, 방사형, 원뿔형 그라디언트의 차이는 무엇인가요?
선형 그라디언트는 각도로 정의된 직선을 따라 색상이 전환됩니다. 방사형 그라디언트는 중심점에서 원형 또는 타원형으로 바깥쪽으로 퍼져나갑니다. 원뿔형 그라디언트는 지정된 각도에서 시작하여 색상환처럼 중심점 주위를 색상이 감쌉니다.
생성된 CSS 그라디언트는 어떻게 사용하나요?
생성된 CSS를 복사하여 스타일시트에 붙여넣습니다. 출력은 .gradient 클래스에 background 속성을 설정합니다. 클래스 이름을 자신의 요소에 맞게 변경하고, 그라디언트가 필요한 곳—div, 버튼, 또는 블록 요소—에 적용하세요.
색상 정지점을 2개 이상 추가할 수 있나요?
네. 추가 버튼을 클릭하면 최대 6개까지 색상 정지점을 삽입할 수 있습니다. 각 정지점에는 고유한 색상 선택기, 16진수 입력, 위치 퍼센트가 있습니다. 퍼센트 값을 조정하여 그라디언트 내 각 색상의 시작과 끝 위치를 제어할 수 있습니다.
색상 정지점의 위치 퍼센트는 무엇을 의미하나요?
퍼센트는 그라디언트에서 해당 색상이 완전히 렌더링되는 위치를 정의합니다. 0%는 맨 처음, 100%는 맨 끝입니다. 중간 정지점은 블렌딩을 제어합니다. 인접한 두 정지점을 같은 퍼센트로 설정하면 전환 없이 하드한 색상 경계가 만들어집니다.
그라디언트 이미지보다 CSS 그라디언트가 더 좋은 이유는?
CSS 그라디언트는 해상도에 독립적이고, 어떤 디스플레이 밀도에서도 완벽하게 스케일링되며, 추가 HTTP 요청이 없고, CSS로 애니메이션과 전환이 가능합니다. 몇 가지 값만 변경하여 쉽게 업데이트할 수 있지만, 이미지는 매번 외부 도구로 재생성해야 합니다.