생성🔒 브라우저에서 실행

CSS 그라디언트 생성기

실시간 미리보기로 아름다운 CSS 그라디언트 생성

각도135°

색상 정지점

#6366f10%

#ec4899100%

background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

사용 사례

몇 초 만에 랜딩 페이지의 히어로 배경 그래디언트 디자인하기.
브랜드의 두 주요 액센트 색상과 일치하는 버튼 그래디언트 만들기.
실제 아트워크를 기다리는 동안 카드 자리 표시자 배경 생성하기.
CSS를 커밋하기 전에 페이지 배경을 프로토타이핑하고 스톱을 라이브로 조정하기.
Tailwind나 CSS-in-JS 코드베이스에 직접 CSS 그래디언트 문자열 복사하기.

CSS 그라디언트 생성기 정보

CSS 그라디언트 생성기는 실시간 미리보기와 함께 아름다운 선형 및 방사형 그라디언트를 만듭니다. 프로젝트에 바로 사용할 수 있는 CSS 코드를 출력합니다. 브라우저에서 작동하는 무료 도구이며 서버에 데이터가 저장되지 않습니다.

자주 묻는 질문

CSS 그라디언트를 만들려면 어떻게 하나요?

그라디언트 유형을 선택하고, 색상 선택기로 색상을 고르고, 방향이나 각도를 조정하여 실시간으로 결과를 확인합니다. 그라디언트가 마음에 들면 생성된 CSS 코드를 복사하여 스타일시트에 붙여넣으세요.

데이터가 저장되거나 전송되나요?

아니요. 그라디언트는 모두 브라우저에서 생성됩니다. 색상, 설정, CSS 코드가 서버로 전송되지 않습니다. 생성된 코드를 복사할 때까지 모든 것이 기기에 남아 있습니다.

3가지 이상의 색상으로 그라디언트를 만들 수 있나요?

네, 여러 색상 정지점을 추가하여 복잡한 다색 그라디언트를 만들 수 있습니다. 각 색상 정지점의 위치와 그라디언트 각도나 방향을 조정하여 원하는 시각적 효과를 정확하게 구현할 수 있습니다.

왜 방사형 그래디언트는 항상 원형이고 가운데 정렬되나요?

현재 미리보기는 명시적 모양이나 위치 없이 radial-gradient(circle, …)을 방출합니다. CSS는 타원과 사용자 정의 중심 좌표(radial-gradient(ellipse at 30% 70%, …))를 지원하지만 미리보기 캔버스를 가독성 있게 유지하려면 추가 컨트롤이 필요합니다. 생성된 문자열을 붙여넣고 고급 케이스에 대해 수동으로 접두사를 편집할 수 있습니다.

CSS 대신 그래디언트를 PNG 이미지로 내보낼 수 있나요?

직접은 안 됩니다 — 도구는 웹에 필요한 CSS 문자열을 출력합니다. 정적 PNG의 경우 CSS를 브라우저 DevTools의 1920×1080 div에 붙여넣고 스크린샷을 찍거나 동일한 그래디언트가 있는 빠른 HTML 파일을 사용해 캡처하세요. PNG 내보내기는 로드맵에 있습니다.

사용 사례

몇 초 만에 랜딩 페이지의 히어로 배경 그래디언트 디자인하기.

브랜드의 두 주요 액센트 색상과 일치하는 버튼 그래디언트 만들기.

실제 아트워크를 기다리는 동안 카드 자리 표시자 배경 생성하기.

CSS를 커밋하기 전에 페이지 배경을 프로토타이핑하고 스톱을 라이브로 조정하기.

Tailwind나 CSS-in-JS 코드베이스에 직접 CSS 그래디언트 문자열 복사하기.