그라데이션 생성기

실시간 미리보기와 함께 CSS linear-gradient/radial-gradient 값을 생성합니다.

브라우저에서 즉시 계산하는 참고용 결과입니다.

색상 A색상 B 각도모드

CSS / HEX

가이드

작업 전에 확인할 점

웹 배경이나 카드 강조 영역에 쓸 두 색 그라데이션을 빠르게 만들 때 사용합니다. 시작색, 끝색, linear 또는 radial 타입과 각도를 정하면 미리보기와 CSS를 함께 얻습니다.

linear 모드는 입력 각도를 포함한 linear-gradient를 만들고 radial 모드는 원형 radial-gradient를 만듭니다. 브라우저가 두 색 사이의 실제 중간 단계를 렌더링합니다.

#3366FF에서 #FF6655로 90도를 지정하면 왼쪽에서 오른쪽으로 흐르는 배경 CSS가 생성됩니다. 코드를 복사해 실제 컴포넌트에 넣고 텍스트 대비를 다시 확인하세요.

이 도구는 두 개의 색상 스톱만 사용하며 브라우저별 색 보간 차이를 제거하지 않습니다. 복잡한 다중 스톱, 투명도, wide-gamut 색은 편집기에서 추가 조정해야 합니다.

그라데이션 생성기의 색상 코드를 어떻게 옮기나요?

결과 아래 복사 버튼으로 CSS, HEX 또는 HSL 텍스트를 복사할 수 있습니다. 붙여 넣은 뒤 대상 디자인 도구가 같은 색 형식을 해석하는지 확인하세요.

그라데이션 생성기의 화면 색이 인쇄물과 같은가요?

같다고 볼 수 없습니다. 화면의 RGB 발광색과 종이·잉크의 반사색은 색역과 혼합 방식이 다르므로 인쇄 프로필과 교정쇄가 필요합니다.

그라데이션 생성기 결과를 디자인 토큰으로 바로 확정해도 되나요?

후보로는 쓸 수 있지만 실제 배경, 다크 모드, 상태 변화, 텍스트 대비를 확인한 뒤 이름과 용도를 정해 토큰으로 승인하세요.