CSS 그라데이션 생성기

background(또는 background-image) 속성에 그라디언트 함수를 설정하면 됩니다. 가장 기본적인 2색 선형 그라디언트는 다음과 같습니다: background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); — 이는 인디고에서 핑크로 좌우로 혼합됩니다. 위에서 색상과 각도를 선택한 후 완성된 background 코드를 스타일시트에 바로 복사하세요. 문법을 직접 작성할 필요 없이, 정지점을 드래그하는 동안 생성기가 자동으로 코드를 만들어 줍니다.

linear-gradient는 지정한 각도의 직선을 따라 색상을 혼합합니다(예: 90deg = 왼쪽에서 오른쪽). radial-gradient는 중심점에서 원형 또는 타원형으로 퍼져나가며, 스포트라이트 효과와 비슷합니다. conic-gradient는 시계 바늘처럼 중심점을 기준으로 색상이 회전하므로, 색상 휠과 파이 차트에 최적입니다. 이 도구는 세 가지 유형을 모두 지원하며, Linear / Radial / Conic 버튼으로 전환할 수 있습니다. Canva의 배경 생성기처럼 선형 그라디언트만 지원하거나, cssgradient.io처럼 원뿔형 그라디언트를 아예 지원하지 않는 무료 도구들과 다릅니다.

임의의 요소의 background에 그라디언트를 적용할 수 있습니다. 전체 페이지 배경으로 사용하려면 다음과 같이 하세요: body { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); min-height: 100vh; }. 그라디언트는 이미지로 인식되므로 background-attachment: fixed;를 추가하면 페이지가 스크롤되는 동안 배경이 고정됩니다. 위에서 시각적으로 설정하고 CSS를 복사하세요. Figma, Canva, 그 어떤 디자인 도구도 필요 없습니다. 2026년 기준 접두사 없이 모든 최신 브라우저에서 동일하게 작동합니다.

각각 위치를 지정한 추가 색상 정지점을 삽입하면 됩니다. 그라디언트 바 위를 클릭하거나 + 정지점 추가 버튼을 눌러 새 정지점을 추가하고, 원하는 위치로 드래그하세요. 3색은 linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%)와 같이 표현됩니다. 정지점 수의 실질적인 제한은 없습니다 — 디자인에 필요한 만큼 추가하세요. 색상 팔레트만 보여주고 실제 CSS는 제공하지 않는 coolors.co나, 그라디언트 편집에 계정 로그인이 필요한 Canva와 달리, 이 도구는 무제한 정지점 지원의 실무용 CSS를 즉시 생성합니다.

선형 그라디언트의 첫 번째 값이 각도입니다: 0deg는 위쪽, 90deg는 오른쪽, 180deg는 아래쪽, 270deg는 왼쪽을 가리킵니다. 'to right'나 'to bottom right' 같은 키워드도 사용할 수 있어, linear-gradient(to right, ...)와 linear-gradient(90deg, ...)는 동일합니다. 위의 각도 슬라이더를 드래그하거나 방향 화살표를 클릭하면 값이 실시간으로 업데이트됩니다. 출력 CSS도 실시간으로 갱신되므로 스타일시트나 프레임워크에 바로 복사해 붙여 넣을 수 있습니다.

2026년 기준으로는 불필요합니다. linear-gradient, radial-gradient, conic-gradient는 모든 최신 브라우저에서 접두사 없이 지원되므로, 일반적인 background: linear-gradient(...)만으로 충분합니다. -webkit- 접두사는 구형 Safari/iOS(2017년 이전) 또는 레거시 Android WebView를 지원해야 할 때만 필요합니다. CSS 출력에서 '-webkit- 접두사 추가'를 체크하면 도구가 표준 선언 위에 올바르게 변환된 폴백 코드를 자동으로 생성합니다. webkit 버전에서의 각도 변환(90deg → 270deg)도 자동으로 처리됩니다.

방향 클래스와 from-, via-, to- 색상 유틸리티를 조합하여 사용합니다. 예: bg-gradient-to-r from-indigo-500 to-pink-500. 정확한 색상을 사용하려면 임의값을 쓰세요: bg-gradient-to-r from-[#6366f1] to-[#ec4899]. 출력을 Tailwind 탭으로 전환하면 현재 그라디언트의 클래스를 복사할 수 있습니다. 방사형 및 원뿔형 그라디언트의 경우 Tailwind에 별도의 단축 클래스가 없으므로 bg-[linear-gradient(...)] 임의값으로 출력됩니다. 대부분의 Tailwind 그라디언트 자료에서는 이 엣지 케이스를 다루지 않습니다.

PNG 다운로드를 클릭하세요. 이 도구는 현재 그라디언트를 HTML 캔버스에 1600×900 해상도로 렌더링하여 .png 파일로 저장합니다. 슬라이드 배경, 소셜 미디어 배너, 디자인 목업에 이상적입니다. 모든 처리가 브라우저 내에서 이루어지므로 어떤 데이터도 업로드되지 않습니다. 서버 업로드가 필요한 TinyWow나 PNG 내보내기를 구독 뒤에 숨긴 Adobe Express와 달리, 개인 정보 위험이 없고 비용도 없습니다. 다른 크기가 필요하다면 다운로드한 PNG를 이미지 편집기에서 크기 조정하거나 자르면 됩니다.

'이미지에서 생성'을 클릭하고 사진을 선택하세요. 도구가 로컬에서 픽셀을 읽어 가장 많이 나타나는 색상을 찾아 그라디언트의 시작점으로 설정합니다 — 브랜드 사진이나 제품 이미지에 맞는 그라디언트를 빠르게 만드는 방법입니다. 이미지는 기기를 벗어나지 않으며, 브라우저에서 분석된 후 즉시 삭제됩니다. 팔레트 추출에 업로드 또는 계정이 필요한 Adobe Color나 Coolors와 달리, 모든 것이 사용자 기기에서 비공개로 처리됩니다. 추출된 정지점을 조정하거나, 각도를 변경하거나, 방사형 또는 원뿔형으로 전환할 수 있습니다.

원뿔형 그라디언트는 직선이 아닌 중심점을 기준으로 색상을 회전시키므로, 전환이 시계 바늘처럼 휩쓸어 나갑니다. conic-gradient(from 0deg, red, yellow, green, blue, red)는 완전한 색상 휠을 만들어냅니다. 파이 차트, 도넛 차트, 진행률 링, 색상 선택기, 각도 조명 효과에 이상적입니다. 브라우저 지원은 2021년부터 Chrome, Firefox, Safari, Edge 전반에 걸쳐 접두사 없이 안정화되었습니다. 위에서 Conic을 선택하고 시작 각도와 중심 위치를 설정해 실험해 보세요. 대부분의 그라디언트 생성기 도구는 원뿔형을 전혀 지원하지 않습니다.

정지점에 알파값을 지정하면 됩니다. 정지점의 불투명도 슬라이더를 낮추면 CSS가 rgba() 형식으로 전환됩니다. 예를 들어, linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%)는 투명에서 60% 검정으로 페이드되며, 사진 위 텍스트 뒤에 사용하는 고전적인 스크림 효과입니다. 팁: 서로 다른 두 완전 투명 색상 사이를 페이드할 때 브라우저가 만들어내는 칙칙한 회색 중간점을 피하려면 같은 색상 계열(투명에서 불투명으로)로 페이드하세요. 정지점 불투명도를 조정하면 도구가 rgba() 출력을 자동으로 처리합니다.

UtiloKit의 그라디언트 생성기는 그 도구들이 제공하는 모든 기능 — 선형·방사형·원뿔형 그라디언트 유형, 다중 정지점 편집기, 코드 복사 — 을 포함하면서, Tailwind CSS 출력, PNG 다운로드, 이미지 기반 그라디언트 추출, 공유 링크, 애니메이션 그라디언트 지원까지 추가로 제공합니다. cssgradient.io는 원뿔형 그라디언트를 지원하지 않으며 Tailwind 출력도 없습니다. Colorzilla의 그라디언트 편집기는 브라우저 확장 프로그램으로, PNG 또는 Tailwind 내보내기가 불가능합니다. 이 도구의 모든 기능은 업로드·회원가입·광고 제한 없이 브라우저에서 실행됩니다.

네, 가능합니다. 이 도구는 완전히 반응형으로 설계되어 있어 모든 최신 모바일 브라우저에서 작동합니다. iPhone의 Safari나 Android의 Chrome에서 열고 그라디언트를 만든 후 CSS를 클립보드에 바로 복사할 수 있습니다. 모든 처리가 클라이언트 사이드에서 이루어지므로 별도의 앱 다운로드가 필요 없으며, 페이지가 로드된 후에는 느린 모바일 연결에서도 원활하게 작동합니다. 드래그 기반 정지점 편집기가 터치 입력에 맞게 조정되어 있어 스마트폰에서 다중 정지점 그라디언트를 만드는 것도 간단합니다.