어떤 CSS gradient 유형을 지원하나요?

Linear, radial, conic. Linear는 도 각도. Radial은 circle/ellipse와 position. Conic은 from-angle과 position.

color stop은 어떻게 동작하나요?

각 stop은 hex와 선택적 0-100% position. position 비우면 균등 배치. 유효한 색 최소 2개 필요.

전체 background 규칙 vs gradient만?

Copy background는 `background: linear-gradient(...);` 붙여 넣기용. Copy value는 `background-image`나 custom property 안 함수만 필요할 때.

transparent나 8자리 hex?

예. #rrggbbaa 입력(또는 solid 선택 후 hex 편집). invalid hex는 고칠 때까지 건너뜀.

입력이 기기를 떠나나요?

아니요. CSS Gradient 생성기는 브라우저에서만. 색·설정은 업로드·저장되지 않습니다.

생성기 도구

CSS Gradient 생성기

브라우저를 떠나지 않고 배경, 버튼, hero용 CSS gradient를 만듭니다.

그라데이션 CSS이 브라우저에 내장되어 있습니다. 아무것도 업로드되지 않았습니다.

그라데이션 유형

각도(도)

0은 위쪽, 90은 오른쪽, 180는 아래쪽, 270은 왼쪽입니다.

색상 중지

정지 1 색상
색상
위치 %
정지 2 색상
색상
위치 %

CSS 출력

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

linear-gradient(135deg, #3b82f6 0%, #ec4899 100%)

CSS Gradient 생성기 정보

브라우저를 떠나지 않고 배경, 버튼, hero용 CSS gradient를 만듭니다. linear, radial, conic 전환, 각도·위치 설정, 최대 8 color stop, `background:` 선언 또는 gradient 값만 복사. stop 색은 HEX to RGB 변환기, 배포 전 CSS 미니파이어와 함께. 업로드 없음.

CSS Gradient 생성기 사용 방법

linear, radial, conic 선택.
각도(linear/conic) 또는 shape·position(radial/conic) 설정.
color stop 편집 - hex와 선택적 % - 또는 stop 추가.
background CSS 또는 gradient 값을 스타일시트에 복사. 모두 기기에 유지.

CSS Gradient 생성기 예시

대각선 브랜드 wash

linear-gradient(135deg, #3b82f6 0%, #ec4899 100%) - 흔한 hero·카드 배경.

부드러운 radial spotlight

radial-gradient(circle at center, #ffffff 0%, #e2e8f0 100%) - 비네트·모달 backdrop.

Conic color wheel

conic-gradient(from 0deg at center, #ff0000 0%, #00ff00 50%, #0000ff 100%) - 차트·장식 ring.

3-stop linear fade

브랜드 색 사이 중간 stop(예: 50% #22c55e) 추가로 더 풍부한 blend.

일반적인 사용 사례

CSS hero·섹션 배경 디자인
multi-stop gradient 버튼·badge fill
radial spotlight·soft vignette 프로토타입
conic chart·장식 ring
production-ready background 선언 복사

CSS Gradient 생성기에 대한 자주 묻는 질문

어떤 CSS gradient 유형을 지원하나요?: Linear, radial, conic. Linear는 도 각도. Radial은 circle/ellipse와 position. Conic은 from-angle과 position.
color stop은 어떻게 동작하나요?: 각 stop은 hex와 선택적 0-100% position. position 비우면 균등 배치. 유효한 색 최소 2개 필요.
전체 background 규칙 vs gradient만?: Copy background는 `background: linear-gradient(...);` 붙여 넣기용. Copy value는 `background-image`나 custom property 안 함수만 필요할 때.
transparent나 8자리 hex?: 예. #rrggbbaa 입력(또는 solid 선택 후 hex 편집). invalid hex는 고칠 때까지 건너뜀.
입력이 기기를 떠나나요?: 아니요. CSS Gradient 생성기는 브라우저에서만. 색·설정은 업로드·저장되지 않습니다.

색상 팔레트 생성기

브라우저에서 무료 색상 팔레트 생성기. complementary, analogous, triadic, tetradic, split-complementary, monochromatic, random 팔레트. HEX, RGB, HSL, CSS 변수 복사.

HEX to RGB Converter

HEX↔RGB 변환과 HSL, CMYK, tint-shade ramp, WCAG contrast 카드, CSS token snippet - 무료 온라인 color code converter.

RGB to HSL Converter

RGB↔HSL 즉시 변환. live swatch와 copy-ready rgb(), hsl() CSS.

PX to REM 변환기

설정 가능한 기본 글꼴 크기로 px를 rem·em으로 온라인 변환. 빠른 참조 표가 있는 무료 px to rem 변환기. 브라우저에서 실행.

CSS Minifier

무료 온라인 CSS minifier. 주석 제거·공백 축소로 CSS compress·minify - 더 작은 stylesheet, 더 빠른 로드. 브라우저 실행, 업로드 불필요.