CSS 그라디언트 생성기
두 개 이상의 색상 스톱을 추가하면 linear-gradient 또는 radial-gradient CSS 코드를 실시간 미리보기와 함께 즉시 생성할 수 있습니다. 각도와 위치를 자유롭게 조정하고, 생성된 코드를 클릭 한 번으로 복사할 수 있습니다.
사용 팁
- 색상 스톱은 최대 6개까지 추가할 수 있으며, 각 스톱의 색상과 위치(%)를 자유롭게 조정해 복잡한 다색 그라디언트를 만들 수 있습니다.
- 선형 그라디언트에서 0도는 아래에서 위로, 90도는 왼쪽에서 오른쪽으로 색이 변하는 방향을 나타내며 슬라이더로 직관적으로 조정할 수 있습니다.
- 원형(radial) 그라디언트는 각도 개념이 없으며, 중심에서 바깥쪽으로 원형으로 색이 퍼져나갑니다.
- "CSS 복사" 버튼을 누르면 생성된 코드가 클립보드에 복사되어 스타일시트에 바로 붙여넣을 수 있습니다.
자주 묻는 질문
linear-gradient는 지정한 각도를 따라 직선 방향으로 색이 변화하며, 버튼이나 띠 모양 배경 디자인에 흔히 사용됩니다. 반면 radial-gradient는 중심점에서 바깥쪽으로 원형 또는 타원형으로 색이 퍼지며, 스포트라이트 효과나 입체감을 표현할 때 적합합니다.
CSS의 linear-gradient()에서 각도는 도(deg) 단위로 지정합니다. 0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로, 180deg는 위에서 아래로 색이 변합니다. CSS의 각도는 시계 방향으로 측정되며, 0도가 오른쪽을 가리키는 일반적인 수학적 관례와는 다르다는 점에 유의해야 합니다.
각 색상 스톱의 위치는 그라디언트의 시작점(0%)부터 끝점(100%) 사이에서 해당 색상이 배치되는 지점을 나타냅니다. 위치를 조정하면 색이 서서히 변하는 구간과 급격히 변하는 구간을 각각 만들 수 있습니다.
linear-gradient와 radial-gradient는 Chrome, Firefox, Safari, Edge를 포함한 모든 주요 브라우저에서 벤더 프리픽스 없이 지원되며, IE10까지도 지원됩니다. 매우 오래된 모바일 브라우저를 지원해야 하는 경우가 아니라면 추가 대응은 필요하지 않습니다.
여담 ― CSS 그라디언트가 이미지를 대체하게 된 이유
CSS3 이전의 웹 디자인에서는 그라디언트 배경을 표현하기 위해 이미지 편집 소프트웨어로 만든 PNG나 JPEG 이미지를 배경으로 사용하는 것이 일반적인 방법이었습니다. 그러나 이 방식은 이미지 로딩으로 인한 표시 속도 저하, 반응형 레이아웃에서 확대할 때 화질이 저하되는 문제, 색상 하나만 바꾸려 해도 이미지를 다시 만들어야 하는 낮은 유지보수성 등 여러 문제를 안고 있었습니다.
2010년대 초반 CSS3의 linear-gradient·radial-gradient 구문이 브라우저에 구현되면서 이러한 문제들이 대부분 해결되었습니다. 텍스트만으로 작성할 수 있어 가볍고, 확대·축소해도 화질이 저하되지 않으며, 색상 변경도 CSS 파일의 숫자 값만 바꾸면 완료됩니다.
초기 구현에서는 브라우저마다 서로 다른 벤더 프리픽스(-webkit-, -moz-, -o- 등)와 구문 차이가 있어 여러 개의 접두사 붙은 표기를 나란히 작성해야 했지만, 현재는 W3C의 표준화가 진행되어 모든 주요 브라우저에서 접두사 없는 표준 구문이 동작합니다.