그라디언트 생성기

라이브 미리보기로 멋진 CSS 그라디언트를 만드세요. 프리셋에서 선택하거나 직접 커스터마이즈하세요. CSS 코드 복사 또는 PNG 다운로드.

CSS

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

그라디언트 유형

각도: 135°

0°360°

색상 정지점

출력 크기

너비

높이

프리셋

모든 처리는 브라우저에서 진행됩니다. 어떤 서버에도 데이터가 전송되지 않습니다.

그라디언트 만드는 방법

선형, 방사형 또는 원뿔형 그라디언트 유형을 선택하세요.

색상 정지점을 추가하고 위치를 조정하여 그라디언트를 세밀하게 조정하세요.

각도 슬라이더로 그라디언트 방향을 제어하세요.

웹사이트용 CSS 코드를 복사하거나 PNG 이미지로 다운로드하세요.

세 가지 유형을 만들 수 있습니다: 선형 그라디언트(직선 색상 전환), 방사형 그라디언트(중심에서 원형 색상 전환), 원뿔형 그라디언트(파이 차트처럼 중심점 주위 색상 전환).

네! CSS 복사 버튼을 클릭하여 코드를 복사하세요. CSS 파일에 background 속성으로 바로 붙여넣기할 수 있습니다. 모든 최신 브라우저에서 작동합니다.

출력 크기를 최대 4096 x 4096 픽셀까지 설정할 수 있습니다. 기본값은 800 x 600 픽셀로 대부분의 웹 배경에 적합합니다.

색상 정지점은 그라디언트의 색상과 나타나는 위치를 정의합니다. 각 정지점에는 색상과 위치(0-100%)가 있습니다. 최소 2개가 필요하며, 복잡한 그라디언트를 위해 더 추가할 수 있습니다.

완전히 안전합니다. 모든 그라디언트 생성은 Canvas를 사용하여 브라우저 내에서 이루어집니다. 어떤 서버에도 데이터가 전송되지 않습니다.

브랜드에 맞는 맞춤 CSS 그라디언트로 시선을 끄는 히어로 섹션, 배너, 페이지 배경을 만드세요.

피드에서 돋보이는 생생한 그라디언트 배경을 소셜 미디어 게시물, 스토리, 커버 이미지용으로 생성하세요.

부드러운 색상 전환으로 프레젠테이션을 향상시키는 전문적인 슬라이드 배경을 디자인하세요.

버튼, 카드, 내비게이션 바 등 UI 구성 요소에 그라디언트 배경을 추가하여 모던한 룩을 연출하세요.

CSS 그라디언트가 지원되지 않는 이메일 헤더와 배경에 사용할 그라디언트 이미지를 다운로드하세요.

그라디언트 배경으로 앱 화면을 빠르게 프로토타입하세요. 웹용 CSS 또는 네이티브 앱 목업용 PNG로 내보내세요.

라이브 미리보기로 아름다운 그라디언트를 디자인하세요. CSS 복사 또는 PNG 다운로드 - 무료이고 간편합니다.