색상 & 디자인

CSS 그래디언트 생성기

CSS 그래디언트 생성기는 색·방향·번짐(컬러 스톱)을 GUI 로 조작하기만 하면 CSS 그라데이션 코드를 자동으로 만들어 주는 무료 도구입니다. 선형(linear)·방사형(radial)·원뿔형(conic) 3가지를 지원하며, 실시간 미리보기를 보면서 웹사이트 배경·버튼·제목 등에 쓸 수 있는 그래디언트를 바로 만들 수 있습니다.

컬러 스톱(색 변화의 기준점)

바를 클릭해 색 추가

색

HEX

투명도100%

위치0%

그래디언트 종류

각도90°

미리보기

CSS 코드

.gradient {
  background-image: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);
}

그래디언트 생성은 모두 사용 중인 브라우저 안에서 이루어지며, 입력한 내용이 외부 서버로 전송되는 일은 없습니다.

컬러 피커

이미지에서 색을 추출해 HEX·RGB·HSL 컬러 코드를 얻는 무료 컬러 피커입니다. 돋보기로 확대해 픽셀 단위로 정확히 색을 고르고 팔레트를 내보낼 수 있습니다. 가입 없이 바로 사용할 수 있습니다.

컬러 코드 변환

HEX·RGB·HSL·HSV·OKLCH 컬러 코드를 서로 변환하는 무료 도구입니다. 투명도(RGBA·8자리 HEX·HSLA)와 CMYK 참고값도 지원하며, 입력한 색을 모든 형식으로 한 번에 변환해 원클릭 복사할 수 있습니다. 웹 브라우저만으로 완결됩니다.

명도 대비 검사

전경색과 배경색의 명도 대비(콘트라스트 비율)를 실시간으로 계산하는 무료 명도 대비 검사 도구입니다. WCAG 2.1·2.2 AA·AAA 판정과 통과색 자동 제안, 색각 시뮬레이션, APCA를 지원합니다. 웹 브라우저만으로 완결됩니다.

색상 팔레트 생성기

베이스 컬러를 한 가지만 고르면 보색·유사색·트라이어드 등 색채 이론에 기반한 색상 팔레트를 자동으로 만들어 주는 무료 배색 생성기입니다. CSS 변수·Tailwind·SCSS·JSON 형식으로 내보낼 수 있고 명암 대비의 기준도 확인할 수 있습니다. 웹 브라우저만으로 완결됩니다.

CSS 그래디언트 생성기 도구란?

종류를 고른 뒤, 선형·원뿔형에서는 각도를 슬라이더로 조정하고, 방사형에서는 형태(원·타원)와 중심 위치를 지정할 수 있습니다. 색은 컬러 스톱으로 자유롭게 추가·삭제할 수 있고, 바 위의 핸들을 드래그해 위치를 바꾸거나 컬러 피커·HEX 입력으로 색을 고를 수 있습니다. 각 스톱에는 투명도(알파)도 설정할 수 있어 rgba() 를 사용한 투과 그래디언트도 만들 수 있습니다. "랜덤 생성" 버튼을 누르면 배색 아이디어도 바로 시험해 볼 수 있습니다.

만든 그래디언트는 CSS(background-image)·CSS 변수(:root { --gradient })·Tailwind 의 backgroundImage·SCSS 변수의 각 형식으로 클릭 한 번에 복사해 그대로 구현에 붙여넣을 수 있습니다. 또한 "URL 복사"를 누르면 현재 그래디언트를 재현할 수 있는 공유 URL 이 만들어져 팀 공유나 북마크에도 편리합니다.

그래디언트 생성은 모두 사용 중인 브라우저 안에서 이루어지며, 입력한 내용이 외부 서버로 전송되는 일은 없습니다. 회원가입이나 광고 클릭 없이 바로 사용할 수 있습니다.

사용 방법

컬러 스톱 바를 클릭해 색을 추가하고, 핸들을 드래그해 위치를 바꿉니다. 색은 컬러 피커 또는 HEX 로, 투명도(알파)는 슬라이더로 조정합니다. "랜덤 생성"으로 배색 아이디어도 바로 시험해 볼 수 있습니다.
그래디언트 종류(선형·방사형·원뿔형)를 선택합니다. 선형·원뿔형에서는 각도를 슬라이더로, 방사형에서는 형태(원·타원)와 중심 위치를 조정합니다.
미리보기로 그래디언트의 완성된 모습을 실시간으로 확인합니다. "URL 복사"를 누르면 현재 설정을 재현할 수 있는 공유 URL 이 만들어집니다.
"CSS 코드"에서 CSS·CSS 변수·Tailwind·SCSS 탭을 전환하고, "CSS 코드 복사"로 코드를 가져와 구현에 붙여넣습니다.

활용 사례

웹사이트나 버튼 배경에 그래디언트를 쓰고 싶은 디자이너·코더가 CSS 를 복사해 바로 준비할 때.
선형·방사형·원뿔형 등 여러 그래디언트를 시험하며 디자인 방향성을 정하고 싶은 프런트엔드 엔지니어.
CSS 변수나 Tailwind 설정으로 그래디언트를 그대로 코드에 옮기고 싶은 개발자.
투명도를 포함한 그래디언트로 이미지 위에 덧씌우는 오버레이나 글래스 느낌의 표현을 만들고 싶은 분.
정한 그래디언트를 공유 URL 로 팀에 전달하거나 나중에 같은 설정을 다시 재현하고 싶은 분.

주의사항

그래디언트 생성은 모두 브라우저 안에서 이루어지며, 입력한 내용이 외부로 전송되는 일은 없습니다.
원뿔형 그래디언트(`conic-gradient`)는 일부 오래된 브라우저에서는 표시되지 않을 수 있습니다. 이용 환경의 지원 상황을 확인해 주세요.
컬러 스톱은 최대 8 개까지 추가할 수 있습니다. 투명도가 100% 일 때는 `#RRGGBB`, 100% 미만일 때는 `rgba()` 로 출력됩니다.
공유 URL 에는 종류·각도·형태·중심 위치·각 컬러 스톱(색·투명도·위치)이 포함됩니다. URL 을 열면 같은 설정으로 그래디언트가 재현됩니다.

자주 묻는 질문

입력한 내용이 서버로 전송되나요?

전송되지 않습니다. 그래디언트 생성은 모두 사용 중인 브라우저 안에서 완결됩니다. 브랜드 컬러나 업무에서 다루는 색도 안심하고 사용할 수 있습니다.

선형·방사형·원뿔형 그래디언트의 차이는 무엇인가요?

선형(linear-gradient)은 직선 방향으로 색이 변하는 가장 일반적인 그래디언트로, 각도로 방향을 지정합니다. 방사형(radial-gradient)은 중심에서 바깥쪽으로 원·타원 형태로 퍼집니다. 원뿔형(conic-gradient)은 중심을 축으로 각도 방향으로 색이 회전해 원형 차트 같은 표현에 어울립니다. 이 도구에서는 3가지를 전환하며 만들 수 있습니다.

CSS 변수나 Tailwind 용으로 내보낼 수 있나요?

할 수 있습니다. "CSS 코드" 탭에서 CSS(background-image)·CSS 변수(:root 의 --gradient)·Tailwind 의 backgroundImage·SCSS 변수를 전환할 수 있으며, "CSS 코드 복사" 버튼으로 코드 전체를 복사해 그대로 구현에 붙여넣을 수 있습니다.

투명도(반투명)가 있는 그래디언트를 만들 수 있나요?

만들 수 있습니다. 각 컬러 스톱에 투명도(알파)를 설정할 수 있고, 100% 미만인 스톱은 rgba() 형식으로 출력됩니다. 이미지 위에 겹치는 오버레이 등 투과를 살린 그래디언트도 만들 수 있습니다.

만든 그래디언트를 공유하거나 저장할 수 있나요?

"URL 복사"를 누르면 종류·각도·컬러 스톱 등을 포함한 공유 URL 이 만들어집니다. 그 URL 을 열면 같은 그래디언트가 재현되므로 팀 공유나 북마크에 편리합니다.

색은 몇 가지까지 쓸 수 있나요?

컬러 스톱은 최대 8 개까지 추가할 수 있어 3색 이상의 복잡한 그래디언트도 만들 수 있습니다. 바를 클릭하면 그 위치의 색을 보간한 새 스톱이 추가됩니다.