본문으로 건너뛰기
작업 데이터는 서버에 저장하지 않고, 내 브라우저에서 처리합니다.
tools
Linear·Radial CSS 그라디언트 생성기

Linear·Radial CSS 그라디언트 생성기

선형 또는 방사형 그라디언트의 방향, 모양, 색상 스톱과 위치를 시각적으로 편집하고 background CSS를 복사합니다.

집중모드
미리보기
실시간으로 그라디언트를 확인하세요.
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
설정
타입과 방향을 조정합니다.
90°
색상 스톱
색과 위치(%)를 추가·삭제하세요.
%
%

주요 기능

  • 0~360도 선형 그라디언트와 원형·타원형 방사형 그라디언트를 만듭니다.
  • HEX 또는 alpha 포함 HEX 색상 스톱을 0~100% 위치에 추가합니다.
  • 최소 두 스톱을 유지하며 위치순으로 정렬해 CSS를 생성합니다.
  • 색상을 무작위로 바꾸거나 기본값으로 초기화합니다.
  • 실시간 미리보기와 완성된 background 선언을 제공합니다.

사용 방법

  1. linear 또는 radial 타입과 방향·모양을 선택합니다.
  2. 각 색상 스톱의 HEX 값과 위치를 조절하고 필요하면 더 추가합니다.
  3. 미리보기를 확인하고 background CSS를 복사합니다.

활용 예시

  • 배경용 선형 그라디언트 제작

    각도와 색상 정지점을 조절하며 화면 배경이나 배너에 사용할 linear-gradient CSS를 만들 수 있습니다.

  • 방사형 색상 효과 탐색

    원형·타원형 방사형 그라디언트를 전환하고 색상을 무작위로 바꿔 시안을 빠르게 비교할 수 있습니다.

개인정보 보호

그라디언트 설정, 무작위 색상과 CSS 생성은 브라우저에서 처리됩니다.

사용 환경

직접 입력하는 색상은 3·6·8자리 HEX 형식이어야 하며 모든 대상 브라우저의 8자리 alpha HEX 지원 여부를 확인하세요.

자주 묻는 질문

색상 정지점을 직접 추가하고 이동할 수 있나요?
네. 정지점을 두 개 이상 유지하면서 추가·삭제하고 각 위치를 0~100%로 지정할 수 있습니다.
어떤 CSS가 생성되나요?
설정에 따라 linear-gradient 또는 radial-gradient 값을 포함한 background 선언을 생성해 복사할 수 있습니다.

관련 도구