CSS 그라데이션이란?
CSS 그라데이션은 두 가지 이상의 색이 자연스럽게 이어지는 배경을 코드만으로 만드는 기능입니다. 이미지 파일이 필요 없어 용량이 작고, 화면 크기에 맞춰 선명하게 늘어나기 때문에 버튼·배너·카드·페이지 배경 등 다양한 곳에 자주 쓰입니다. 색상 스톱(색과 위치 %)을 여러 개 지정해 복잡한 색 변화도 표현할 수 있습니다. 이 생성기는 선형·원형·원뿔형을 모두 지원하며 결과를 실시간 미리보기로 확인할 수 있습니다.
사용법
- 타입을 선형(linear)·원형(radial)·원뿔형(conic) 중에서 선택합니다.
- 선형·원뿔형일 때는 각도(deg) 슬라이더로 색이 변하는 방향을 조절합니다.
- 각 색상 스톱의 색·위치(%)·투명도(%)를 지정하고, 필요하면 색을 추가·삭제합니다. 프리셋이나 랜덤 버튼으로 빠르게 시작할 수도 있습니다.
- 위쪽 미리보기 박스에서 결과를 즉시 확인합니다.
- 완성되면 background 코드를 복사해 원하는 요소의 CSS에 붙여넣습니다.
동작 원리
선형(linear)은 지정한 각도 방향으로 색이 직선으로 변하고, 원형(radial)은 중심에서 바깥쪽으로 원을 그리며 퍼지며, 원뿔형(conic)은 중심을 축으로 시곗바늘처럼 각도를 따라 색이 도는 방식입니다. 각 색상 스톱은 '색 + 위치 %'로 표현되며, 위치가 작은 순서대로 정렬해 CSS의 gradient 함수 문법으로 조합됩니다. 투명도를 100% 미만으로 지정하면 해당 색이 rgba() 형태로 변환되어 반투명하게 표현됩니다. 모든 계산은 브라우저에서만 이뤄지고 입력값은 저장·전송되지 않습니다.
활용과 팁
- 버튼·배너·카드·히어로 영역의 배경을 이미지 없이 가볍게 꾸밀 때 유용합니다.
- 스톱을 많이 넣을수록 다채로운 색 변화를, 투명도를 활용하면 은은한 겹침 효과를 만들 수 있습니다.
- 결과는 CSS·Tailwind 클래스·SCSS 변수 형태로 복사할 수 있어 사용하는 환경에 맞춰 바로 붙여넣을 수 있습니다.
- 속성은
background와background-image중에서 선택해 출력할 수 있습니다. - 프리셋으로 자주 쓰는 배색을 불러오거나 랜덤 버튼으로 새 조합을 얻은 뒤 세부 값만 다듬어도 좋습니다.
자주 묻는 질문
CSS 그라데이션이란 무엇인가요?
두 가지 이상의 색이 부드럽게 이어지는 배경을 코드로 만드는 기능입니다. 이미지 파일 없이 background 속성만으로 표현할 수 있어 용량이 작고 화면 크기에 맞춰 자동으로 늘어납니다.
linear·radial·conic 그라데이션의 차이는 무엇인가요?
linear(선형)는 지정한 각도 방향으로 색이 직선으로 변하고, radial(원형)은 중심에서 바깥쪽으로 원을 그리며 퍼지며, conic(원뿔형)은 중심을 축으로 각도를 따라 시곗바늘처럼 색이 돕니다. 선형과 원뿔형은 각도(deg)를 조절할 수 있습니다.
만든 그라데이션은 어떻게 사용하나요?
출력된 background 코드를 복사해 적용하려는 요소의 CSS에 붙여넣으면 됩니다. 예: .box { background: linear-gradient(90deg, #fff 0%, #000 100%); }
색상 스톱은 몇 개까지 추가할 수 있나요?
최소 2개가 필요하며 그 이상은 자유롭게 추가할 수 있습니다. 스톱을 많이 넣을수록 더 복잡하고 다채로운 색 변화를 표현할 수 있습니다.
색에 투명도를 넣을 수 있나요?
네. 각 색상 스톱마다 투명도(%)를 지정할 수 있으며, 100% 미만이면 해당 색이 rgba() 형태로 변환되어 반투명하게 표현됩니다.
코드를 어떤 형식으로 복사할 수 있나요?
일반 CSS 코드, Tailwind 임의값 클래스, SCSS 변수 형태로 복사할 수 있고, 속성은 background와 background-image 중에서 선택할 수 있습니다.