본문으로 건너뛰기
Boltpic
한국어

CSS 그라디언트 생성기

색상 정지점과 각도를 화면에서 조정해 선형·방사형 그라디언트를 만드세요. 완성된 CSS는 바로 복사할 수 있습니다.

유형

막대를 클릭하면 정지점이 추가되고, 핸들을 드래그하면 이동, 핸들을 클릭하면 삭제됩니다.

CSS
background: linear-gradient(90deg, #0066cc 0%, #2997ff 100%);

CSS 그라디언트 생성기 사용 방법

유형과 정지점을 설정하고 미리보기를 확인한 뒤 생성된 CSS를 복사하세요.

  1. 유형과 방향 선택하기

    먼저 선형(linear)과 방사형(radial) 중 유형을 선택하세요. 선형은 각도로 색이 흐르는 방향을 정하고, 방사형은 원·타원 중 색이 퍼지는 모양을 선택할 수 있습니다.

    유형과 방향 선택하기

  2. 색상 정지점 편집하기

    색상 막대를 클릭하면 새 정지점이 추가되고, 핸들을 드래그하면 위치가 이동하며, 핸들을 클릭하면 삭제됩니다. 각 정지점의 색상과 위치(%)를 조절하세요.

    색상 정지점 편집하기

  3. 미리보기로 확인하기

    조정하는 즉시 결과가 미리보기에 반영됩니다. 배경, 버튼, 배너 등 실제 사용할 곳을 떠올리며 색 조합과 방향을 다듬어보세요. 처음이라면 추천 그라디언트에서 마음에 드는 프리셋을 골라 '편집기에서 열기'로 시작하는 것도 좋습니다.

    미리보기로 확인하기

  4. CSS 코드 복사하기

    완성되면 CSS 출력 영역에 background 코드가 자동으로 생성됩니다. 복사 버튼을 눌러 클립보드에 저장한 뒤, CSS 파일이나 컴포넌트 스타일에 그대로 붙여넣으세요.

    CSS 코드 복사하기

미리보기에서 그라디언트 조정

색상, 정지점 위치, 유형, 모양, 각도를 바꾸면서 결과를 미리보기로 확인할 수 있습니다.

미리보기에서 그라디언트 조정

생성된 CSS 코드 복사

완성한 그라디언트는 CSS background 코드로 자동 생성됩니다. 복사 버튼을 누르면 현재 설정값이 포함된 코드를 클립보드에 저장해 프로젝트에 바로 붙여넣을 수 있습니다.

생성된 CSS 코드 복사

그라디언트 적용 예

별도 이미지 파일 없이 배경, 강조 영역, 오버레이를 만들 수 있습니다.

  • 웹사이트 히어로·배너 배경

    메인 비주얼 영역에 브랜드 색 기반의 그라디언트를 깔면 이미지 없이도 완성도 있는 배경을 만들 수 있습니다. 이미지보다 용량이 가벼워 로딩 속도에도 유리합니다.

  • 버튼·카드 UI 포인트

    버튼이나 카드에 은은한 그라디언트를 적용하면 평면적인 단색보다 시선을 끄는 UI를 만들 수 있습니다. 같은 색상의 밝기만 달리한 2개 정지점으로 시작하면 실패가 적습니다.

  • 썸네일·포스터 배경

    썸네일, 행사 포스터, SNS 카드의 배경에 사용할 수 있습니다. 글자가 놓이는 모든 구간에서 글자색과 배경의 대비를 확인하고, 대비가 고르지 않으면 오버레이를 추가하세요.

  • 다크 모드 대응 배경

    어두운 색끼리 이어지는 그라디언트는 다크 테마 화면에 깊이감을 줍니다. 완전한 검정 대신 짙은 남색·보라 계열을 섞으면 부드러운 인상을 만들 수 있습니다.

추천 그라디언트

프리셋을 선택해 편집기에서 수정하거나 CSS 코드를 복사할 수 있습니다. 배경, 버튼, 카드, 배너, 포스터에 맞춰 색상·정지점·각도를 조정하세요.

background: linear-gradient(90deg, #0066cc 0%, #2997ff 100%);
background: linear-gradient(60deg, #ff5e62 0%, #ff9966 100%);
background: linear-gradient(120deg, #2193b0 0%, #6dd5ed 100%);
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
background: linear-gradient(45deg, #ee9ca7 0%, #ffdde1 100%);
background: linear-gradient(110deg, #00c6ff 0%, #7d5fff 50%, #ff5edf 100%);
background: radial-gradient(ellipse, #ffd86f 0%, #fc6262 100%);

자주 묻는 질문

어떤 그라디언트 유형을 지원하나요?

선형 그라디언트와 방사형 그라디언트를 지원합니다. 선형 그라디언트는 색상이 한 방향으로 자연스럽게 이어지는 방식입니다. 각도를 조절해 왼쪽에서 오른쪽, 위에서 아래, 대각선 방향 등 원하는 흐름을 만들 수 있습니다. 방사형 그라디언트는 중심에서 바깥쪽으로 색상이 퍼지는 방식입니다. 빛이 번지는 배경, 강조 영역, 부드러운 포인트 효과를 만들 때 유용합니다. 활용 예시) 선형 그라디언트 : 버튼, 배너, 카드 배경 방사형 그라디언트 : 히어로 배경, 포인트 효과, 조명 느낌

CSS 코드를 복사할 수 있나요?

네, 생성한 그라디언트는 CSS background 코드로 바로 복사할 수 있습니다. 예를 들어 선형 그라디언트를 만들면 다음과 같은 형태의 코드가 생성됩니다.

background: linear-gradient(90deg, #0066cc 0%, #2997ff 100%);

복사한 코드는 CSS 파일, React/Vue 컴포넌트 스타일, HTML 인라인 스타일, Tailwind 커스텀 스타일 등에 활용할 수 있습니다.

색상 정지점 개수에 제한이 있나요?

색상 정지점은 그라디언트 안에서 색상이 시작되거나 바뀌는 위치를 의미합니다. 일반적으로 두 개의 색상만으로도 기본적인 그라디언트를 만들 수 있고, 더 많은 색상 정지점을 추가하면 복잡하고 풍부한 색 흐름을 만들 수 있습니다. 예를 들어 파란색에서 보라색으로 이어지는 단순한 배경은 2개의 정지점으로 충분하지만, 무지개색이나 복합 배경처럼 여러 색상이 이어지는 디자인은 3개 이상의 정지점을 사용하면 좋습니다. 다만 너무 많은 색상 정지점을 사용하면 색상 흐름이 복잡해질 수 있으므로, 일반적인 UI 디자인에서는 2~4개 정도를 추천합니다.

추천 그라디언트는 수정할 수 있나요?

네, 추천 그라디언트는 그대로 복사해서 사용할 수도 있고, 편집기에서 열어 색상이나 각도를 수정할 수도 있습니다. 처음부터 색상을 고르기 어렵다면 추천 프리셋을 먼저 선택한 뒤, 브랜드 색상이나 프로젝트 분위기에 맞게 조금씩 조정하는 방식으로 사용하면 좋습니다.

그라디언트가 브라우저에서 잘 보이나요?

대부분의 최신 브라우저는 CSS linear-gradient()와 radial-gradient()를 지원합니다. Chrome, Edge, Safari, Firefox 같은 주요 브라우저에서는 일반적으로 문제없이 사용할 수 있습니다. 다만 오래된 브라우저나 특수한 환경에서는 일부 표현이 다르게 보일 수 있으므로, 실제 서비스에 적용하기 전 주요 브라우저에서 한 번 확인하는 것이 좋습니다.