CSS 그라디언트 생성기
비주얼 에디터로 아름다운 CSS 그라디언트를 만드세요.
색상 포인트
방향
CSS 출력
빠른 프리셋
CSS 그라데이션 작업하기
소개
CSS 그라데이션은 이미지 파일 없이 부드러운 색상 전환을 만들 수 있게 해줍니다 — 더 빠르고, 어떤 크기로든 확장 가능하며, 편집이 쉽습니다. 2010년부터 CSS 표준의 일부이며 오늘날 완전 브라우저 지원. 흔히 사용되는 세 가지 유형: 선형(한 방향으로 색상 흐름), 방사형(점에서 바깥쪽으로 흐름), 콘적(원 주위로 흐름). 현대 CSS는 여러 컬러 스톱·투명도·보간 힌트 같은 고급 기능을 추가. 본 생성기는 어떤 그라데이션이든 시각적으로 만들고 CSS를 클립보드에 복사합니다.
작동 원리
선형 그라데이션: linear-gradient(방향, color1 stop1%, color2 stop2%, ...). 방향은 각도(45deg)나 키워드(to bottom right). 각 컬러 스톱은 선택적으로 위치 지정(0% = 시작, 100% = 끝). 방사형은 모양(circle/ellipse)과 크기 추가. 콘적은 각도 주위로 스윕. 생성기는 이 모든 것을 시각적 에디터에 래핑 — 색상 선택, 스톱 드래그, 방향 선택 → 결과 즉시 확인.
언제 유용한가
히어로 섹션 배경, 버튼 스타일, 카드 강조, 장식 구분선, 로딩 바, 진행 표시기. 그라데이션을 절제해 사용하세요 — 과용하면 낡아 보이고, 절제해 사용하면 깊이와 시각적 흥미를 더합니다. 스플래시 화면, 모바일 앱 온보딩, 현대 랜딩 페이지에 특히 효과적. 페이지 무게를 줄이려면 디자인 도구에서 내보낼 그라데이션 이미지를 대체.
자주 묻는 질문
그라데이션이 띠 무늬처럼 보이는 이유는?
사용자 디스플레이의 색상 양자화. 현대 모니터는 그라데이션을 부드럽게 처리; 구식이나 저품질 디스플레이는 가시 띠('밴딩')를 보임. 약간의 노이즈 추가(CSS 필터)가 마스킹 가능. 또한 매우 비슷한 색상 간 전환이 대비되는 색상보다 더 띠를 만듭니다.
그라데이션을 애니메이션할 수 있나요?
네, 다만 CSS 그라데이션은 네이티브 CSS 속성이 아니므로(계산된 이미지) 부드럽게 트윈되지 않습니다. 흔한 해결책: 요소보다 큰 background-size 사용 + background-position 애니메이션. 또는 새 @property 문법의 CSS 사용자 정의 속성으로 진짜 그라데이션 애니메이션.
선형·방사형·콘적 — 언제 어느 것?
선형은 배경과 대부분 UI 강조에. 방사형은 스포트라이트나 버튼 빛에. 콘적은 파이 차트 같은 시각이나 색상환 효과에. 콘적은 선형/방사형보다 브라우저 지원이 약간 덜하지만 모든 현대 브라우저 지원.
추천 도구
유용할 수 있는 엄선된 도구