CSS 그라데이션 생성기
색 두 개와 각도만 정하면 붙여넣을 CSS가 바로 나옵니다.
설명
두 색상과 각도로 CSS linear-gradient 코드를 생성합니다. 그대로 복사해 쓰세요.
웹 디자인이나 앱 UI에서 단색 배경 대신 그라데이션을 쓰면 세련된 느낌을 줄 수 있지만, CSS 코드를 직접 작성하는 것은 번거롭고 색상 조합을 미리 확인하기 어렵습니다. 이 도구는 색상과 방향을 클릭 몇 번으로 조합하면 바로 미리보기와 CSS 코드를 생성해 주어, 즉시 복사해 프로젝트에 붙여넣을 수 있습니다.
사용 방법
시작 색과 끝 색을 컬러 피커로 지정하고, 방향(각도) 슬라이더를 움직여 그라데이션이 흐르는 방향을 조절합니다. 미리보기 영역에서 결과를 실시간으로 확인하며 조정한 뒤, '복사' 버튼을 누르면 완성된 linear-gradient 코드가 background 속성 형태로 클립보드에 저장됩니다. 색을 세 가지 이상 넣거나 radial-gradient가 필요하면, 복사한 코드의 콤마 뒤에 색상 값을 직접 이어 붙여 확장하면 됩니다.
알아두면 좋은 점
CSS linear-gradient는 각도 값으로 방향을 지정하는데, 0deg는 아래에서 위, 90deg는 왼쪽에서 오른쪽 방향입니다. to right처럼 방향 키워드를 쓰면 코드 가독성이 높아집니다. 그라데이션은 이미지 파일이 아니라 CSS 값이므로 파일 용량이 전혀 없고, 고해상도(Retina) 화면에서도 선명하게 표시됩니다. 텍스트에 그라데이션을 적용할 때는 background-clip: text; -webkit-background-clip: text; color: transparent; 조합을 함께 써야 합니다.
이럴 때 유용해요
프레젠테이션 슬라이드 배경, 카드 컴포넌트, 버튼, 헤더 배너 등 다양한 UI 요소에 그라데이션을 적용할 때 일일이 코드를 외울 필요 없이 빠르게 생성할 수 있습니다. 특히 Figma나 Adobe XD에서 색상을 정했지만 CSS 코드가 없을 때, HEX 값을 그대로 입력해 즉시 코드를 뽑을 수 있어 편리합니다. 소셜 미디어 썸네일이나 유튜브 채널 아트처럼 그래픽 툴이 없어도 CSS로 배경을 만들고 싶을 때도 활용할 수 있습니다.
자주 묻는 질문
생성된 CSS 코드를 어디에 붙여넣으면 되나요?
색상 정지점을 3개 이상 추가할 수 있나요?
radial-gradient는 어떻게 다른가요?
모든 브라우저에서 그라데이션이 동일하게 표시되나요?
투명도(알파)가 포함된 그라데이션도 만들 수 있나요?
관련 도구
개인정보처리방침
모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com
CSS 그라데이션 생성기 사용법
시작 색과 끝 색 두 가지를 고르고 각도를 정하면, 화면 미리보기와 함께 background에 그대로 붙일 수 있는 코드가 실시간으로 만들어집니다. 예를 들어 시작색 #0099ff, 끝색 #00e0c6, 각도 135도를 넣으면 background: linear-gradient(135deg, #0099ff, #00e0c6); 형태로 출력됩니다. 만든 코드는 복사해 CSS 파일이나 인라인 스타일에 넣으면 되고, 색을 바꿀 때마다 미리보기가 즉시 갱신되므로 눈으로 확인하며 조정할 수 있습니다.
각도와 정지점이 계산되는 방식
선형 그라데이션의 각도는 시계 방향 기준입니다. 0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로, 180deg는 위에서 아래로 색이 흐릅니다. 각 색은 위치값(%)을 가지며, 위치를 생략하면 색들이 0%부터 100%까지 균등 분할됩니다. 정지점 두 개의 위치를 같은 값으로 붙이면(예: 빨강 50%, 파랑 50%) 색이 섞이지 않고 딱 잘려 단색 띠(하드 스톱)가 됩니다. 참고로 이 도구는 직선 방향으로 색이 전환되는 linear-gradient만 생성합니다. 중심에서 바깥으로 퍼지는 원형(radial-gradient)이나 중심을 축으로 회전하는 원뿔형(conic-gradient)이 필요하면, 복사한 코드의 함수 이름을 바꾸고 CSS 문법에 맞게 직접 수정해 활용하면 됩니다.
이럴 때 씁니다
버튼·헤더 배경, 히어로 섹션, 카드 테두리(border-image), 텍스트 그라데이션(background-clip: text) 등에 활용합니다. 이미지 파일 없이 CSS만으로 배경을 만들기 때문에 용량이 0에 가깝고, 화면 크기가 바뀌어도 깨지지 않으며 확대해도 선명합니다. 여러 색을 겹쳐 미묘한 음영을 만들거나, 반투명 그라데이션을 사진 위에 덮어 텍스트 가독성을 높이는 오버레이로도 자주 씁니다.
실전 팁
같은 계열의 색(색상환에서 가까운 색)을 쓰면 중간에 탁한 회색이 끼는 현상을 줄일 수 있습니다. 정반대 색을 쓸 때 중간이 칙칙해지면 중간 지점에 밝은 색 정지점을 하나 더 넣어 보정하세요. 콤마로 linear-gradient를 여러 개 겹치면 층층이 쌓인 배경을 만들 수 있고, 반투명(rgba) 정지점을 섞으면 아래 배경이 비칩니다. 부드러운 배경은 각도를 90·135·180 같은 단순 값으로, 임팩트가 필요하면 대비가 큰 두 색을 쓰는 편이 좋습니다.
자주 묻는 질문
정지점(color stop)은 몇 개까지 넣을 수 있나요?
CSS 표준상 개수 제한은 사실상 없습니다. 다만 정지점이 많을수록 색 변화가 복잡해져 오히려 지저분해 보일 수 있으니 2~4개로 시작해 필요할 때만 늘리는 것이 좋습니다.
만든 코드가 예전 브라우저에서 안 나옵니다.
표준 linear-gradient·radial-gradient는 현행 브라우저 전부 지원합니다. 아주 오래된 환경까지 대응하려면 -webkit- 접두사 버전을 함께 넣으면 됩니다. conic-gradient는 상대적으로 늦게 지원된 기능이라 구형 환경에서는 표시되지 않을 수 있습니다.
글자에 그라데이션을 넣고 싶어요.
텍스트 요소에 배경으로 그라데이션을 준 뒤 background-clip: text; -webkit-background-clip: text; color: transparent;를 함께 지정하면 글자 모양대로 색이 채워집니다. 배경을 글자 영역으로 잘라내는 방식입니다.
각도 방향이 헷갈립니다.
CSS 그라데이션 각도는 시계 방향이며 to right는 90deg, to bottom은 180deg와 같습니다. 방향 키워드(to right 등)와 각도(deg)는 같은 결과를 내므로 편한 쪽을 쓰면 됩니다.