🧰미니 도구 모음
🎨

그래디언트 생성기

CSS 그래디언트를 시각적으로 생성하고 코드를 복사하세요

그래디언트 타입

135°

색상

#667EEA
#764BA2

CSS 코드

background: linear-gradient(135deg, #667EEA, #764BA2);

프리셋

사용 방법

  1. 1선형(Linear) 또는 원형(Radial) 그래디언트 타입을 선택하세요.
  2. 2색상 피커로 원하는 색상을 지정하고, 필요하면 3번째 색상을 추가하세요.
  3. 3선형 그래디언트의 경우 각도 슬라이더로 방향을 조절하세요.
  4. 4생성된 CSS 코드를 복사하여 프로젝트에 바로 적용하세요.

활용 예시

  • 웹사이트 배경 그래디언트 디자인
  • 버튼, 카드 등 UI 요소에 그래디언트 적용
  • SNS 배너, 썸네일 배경색 결정
  • CSS 그래디언트 코드 빠르게 생성

자주 묻는 질문

Q. 색상을 몇 개까지 추가할 수 있나요?

A. 최대 3개까지 색상을 추가할 수 있습니다. 2색 또는 3색 그래디언트를 만들 수 있습니다.

Q. 프리셋은 어떻게 사용하나요?

A. 하단의 프리셋을 클릭하면 미리 정의된 색상 조합이 자동으로 적용됩니다. 이후 자유롭게 수정할 수 있습니다.