CSS 그라디언트 생성기

선형, 방사형 및 원뿔형 CSS 그래디언트를 시각적으로 디자인합니다. 색상 정지점을 추가하고, 위치를 조정하고, 바로 사용할 수 있는 CSS 코드를 복사하세요.

즉시 결과 브라우저에서 실행
CSS 그라디언트 생성기
135°

사전 설정

CSS 그라데이션 팁

그라데이션은 배경, 배경 이미지, 테두리 이미지, 마스크 등 이미지를 허용하는 모든 CSS 속성에서 작동합니다. 쉼표로 구분된 그라디언트를 사용하여 레이어를 만듭니다. background: 선형-그라디언트(...), 선형-그라디언트(...); CSS: background, background-image, border-image, mask; background: linear-gradient(...), linear-gradient(...);

사용 방법?

  1. 1
    그라데이션 유형 선택선형, 방사형 또는 원추형을 선택합니다. 선형 또는 원뿔형 그라데이션의 각도를 조정합니다.
  2. 2
    색상 중단점 설정각 정류장의 색상과 위치를 선택하세요. 복잡한 그라데이션을 위해 정지점을 더 추가하세요.
  3. 3
    CSS를 복사하세요CSS 복사를 클릭하여 바로 붙여넣을 수 있는 코드를 가져오거나 배경 값만 복사하세요.

자주 묻는 질문

CSS 그래디언트란 무엇입니까?
CSS 그래디언트는 브라우저에 의해 생성된 두 개 이상의 색상 사이를 부드럽게 전환하는 것입니다. 이미지 파일은 필요하지 않습니다. 선형 그래디언트는 직선으로 이동하고, 방사형 그래디언트는 중심점에서 방사되며, 원뿔형 그래디언트는 색상환처럼 중심 주위를 휩쓸고 지나갑니다.
색상 정지점은 몇 개나 추가할 수 있나요?
이 도구는 최대 8개의 색상 정지점을 지원합니다. CSS 자체에는 공식적인 제한이 없지만 브라우저는 문제 없이 수십 개의 중지를 처리합니다.
생성된 CSS는 모든 브라우저와 호환됩니까?
예. 출력은 모든 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 지원하는 접두사가 없는 표준 구문을 사용합니다. Internet Explorer 9는 이 도구에서 생략된 이전 -ms- 접두사가 필요한 유일한 주요 브라우저입니다.

CSS 그라디언트 생성기

이 도구는 linear, radial, conic 세 가지 CSS 그라디언트를 만들고 실시간 미리보기와 코드를 보여 줍니다. linear 와 conic 모드에서는 각도를 조정할 수 있고, radial 모드에서는 각도 입력을 숨기고 중심에서 퍼지는 형태를 다룹니다. 색상 stop 은 색과 위치를 각각 바꿀 수 있으며 최대 8개까지 추가할 수 있습니다. 프리셋을 선택하면 종류, 각도, 색상 stop 이 한 번에 적용되고, 랜덤 버튼으로 새로운 조합을 빠르게 시도할 수 있습니다. 출력은 background: ...; 형태로 복사하거나 배경값만 복사할 수 있습니다.

어디에 활용할 수 있나요?

그라디언트는 버튼, 히어로 배경, 카드 포인트, 아바타 배경, 차트 색상띠, 상태 표시 등에 사용할 수 있습니다. linear 는 방향성이 있는 배경에, radial 은 중심 강조나 빛 효과에, conic 은 원형 게이지나 컬러휠 느낌의 표현에 적합합니다. stop 위치가 가까우면 경계가 강해지고, 멀면 부드럽게 이어집니다. 프리셋에서 시작해 브랜드 색상이나 화면 분위기에 맞게 색과 위치를 조정하면 작업 속도가 빨라집니다.

가독성과 유지보수

그라디언트 위에 텍스트를 올릴 경우 가장 밝은 부분과 어두운 부분 모두에서 대비를 확인해야 합니다. 선명한 색을 너무 많이 쓰면 장식성이 강해져 업무 화면에서는 정보를 읽기 어려워질 수 있습니다. 배경으로 사용할 때는 색 수를 줄이고 필요하면 반투명 오버레이를 더하는 것이 안정적입니다. 생성된 CSS 는 바로 사용할 수 있지만 여러 화면에서 반복한다면 CSS 변수나 테마 토큰으로 정리하는 편이 유지보수에 좋습니다.

댓글