CSS 그라디언트 생성기
선형·방사형 그라디언트를 시각적으로 디자인하고 바로 쓸 수 있는 CSS를 복사하세요.
막대를 클릭하면 정지점이 추가되고, 핸들을 드래그하면 이동, 핸들을 클릭하면 삭제됩니다.
background: linear-gradient(90deg, #0066cc 0%, #2997ff 100%);원하는 분위기의 그라디언트를 직접 제작
색상, 각도, 정지점 위치를 조절하면서 그라디언트를 실시간으로 미리 볼 수 있습니다. 배경, 카드, 버튼, 배너에 어울리는 색 흐름을 직접 확인하며 원하는 스타일을 빠르게 만들 수 있습니다.
완성된 CSS 코드를 바로 복사
완성한 그라디언트는 CSS background 코드로 자동 생성됩니다. 복사 버튼을 누르면 현재 설정값이 포함된 코드를 클립보드에 저장해 프로젝트에 바로 붙여넣을 수 있습니다.
추천 그라디언트
자주 사용하는 색 조합을 프리셋으로 준비했습니다. 마음에 드는 그라디언트를 선택해 편집기에서 바로 수정하거나, 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 코드를 복사할 수 있습니다. 다만 정지점 위치를 세밀하게 조정해야 하는 경우에는 PC 환경에서 작업하는 것이 더 편리할 수 있습니다.
추천 그라디언트는 수정할 수 있나요?
네, 추천 그라디언트는 그대로 복사해서 사용할 수도 있고, 편집기에서 열어 색상이나 각도를 수정할 수도 있습니다. 처음부터 색상을 고르기 어렵다면 추천 프리셋을 먼저 선택한 뒤, 브랜드 색상이나 프로젝트 분위기에 맞게 조금씩 조정하는 방식으로 사용하면 좋습니다.
그라디언트가 브라우저에서 잘 보이나요?
대부분의 최신 브라우저는 CSS linear-gradient()와 radial-gradient()를 지원합니다. Chrome, Edge, Safari, Firefox 같은 주요 브라우저에서는 일반적으로 문제없이 사용할 수 있습니다. 다만 오래된 브라우저나 특수한 환경에서는 일부 표현이 다르게 보일 수 있으므로, 실제 서비스에 적용하기 전 주요 브라우저에서 한 번 확인하는 것이 좋습니다.