CSS 그라디언트 생성기
두 개 이상의 색상 스톱을 추가하면 linear-gradient 또는 radial-gradient CSS 코드를 실시간 미리보기와 함께 즉시 생성할 수 있습니다. 각도와 위치를 자유롭게 조정하고, 생성된 코드를 클릭 한 번으로 복사할 수 있습니다.
CSS 그라디언트란
CSS 그라디언트는 두 가지 이상의 색을 매끄럽게 이은 띠나 방사 모양의 무늬를, 이미지를 쓰지 않고 스타일시트만으로 그리는 얼개입니다. linear-gradient()는 지정하신 각도를 따라 직선으로 색이 옮아 가고, radial-gradient()는 중심에서 바깥으로 원을 그리며 퍼집니다. 글자로 쓸 수 있어 가볍고, 확대해도 거칠어지지 않으며, 색을 바꾸고 싶으실 때는 수치만 고쳐 쓰면 됩니다.
이 도구는 종류·각도·컬러 스톱을 화면에서 조정하면서 결과를 그 자리에서 확인하고, 완성된 CSS를 그대로 복사하실 수 있습니다. 컬러 스톱은 최대 6개까지 둘 수 있고, 저마다 색과 위치(%)를 지정하실 수 있습니다. 2개 미만이면 그라디언트가 되지 않아 오류가 납니다. 참고로 각도는 CSS 나름의 잡는 방식으로, 0deg가 아래에서 위, 90deg가 왼쪽에서 오른쪽입니다. 수학에서 쓰는 각도와 0의 방향이 다른 점에 유의해 주세요. 원형(radial)에는 각도의 개념이 없어 각도 지정이 듣지 않습니다.
CSS 그라디언트 만드는 법
- 종류를 고릅니다 직선으로 색을 바꾸고 싶으시면 선형(linear), 중심에서 방사 모양으로 퍼뜨리고 싶으시면 원형(radial)을 고릅니다.
- 각도를 정합니다 선형일 때만 듣습니다. 0deg가 아래에서 위, 90deg가 왼쪽에서 오른쪽이며 시계 방향으로 늘어납니다. 슬라이더로 움직이며 방향을 확인하실 수 있습니다.
- 컬러 스톱을 둡니다 ‘색 추가’로 최대 6개까지 늘리실 수 있습니다. 각 스톱에 색과 위치(%)를 지정하시면 색이 바뀌는 자리를 세밀히 다루실 수 있습니다.
- 미리보기로 확인합니다 설정을 바꾸실 때마다 미리보기가 다시 그려집니다. 색의 경계가 너무 급하지 않은지, 노리신 방향인지를 그 자리에서 판단하실 수 있습니다.
-
CSS를 복사합니다
‘CSS 복사’로 클립보드에 담깁니다. 스타일시트의
background에 그대로 붙여 넣으실 수 있습니다.
더 잘 활용하기 위한 팁
- 색상 스톱은 최대 6개까지 추가할 수 있으며, 각 스톱의 색상과 위치(%)를 자유롭게 조정해 복잡한 다색 그라디언트를 만들 수 있습니다.
- 선형 그라디언트에서 0도는 아래에서 위로, 90도는 왼쪽에서 오른쪽으로 색이 변하는 방향을 나타내며 슬라이더로 직관적으로 조정할 수 있습니다.
- 원형(radial) 그라디언트는 각도 개념이 없으며, 중심에서 바깥쪽으로 원형으로 색이 퍼져나갑니다.
- "CSS 복사" 버튼을 누르면 생성된 코드가 클립보드에 복사되어 스타일시트에 바로 붙여넣을 수 있습니다.
CSS 그라디언트의 활용 상황
버튼이나 배지에 입체감을 주기
위에서 아래로 살짝 어두워지는 선형 그라디언트를 깔면 단색보다 누를 수 있어 보이는 모습이 됩니다. 색 차이를 작게 지키는 것이 자연스럽게 보이는 요령입니다.
히어로 영역의 배경을 만들기
페이지 위쪽의 너른 띠에 두 가지 이상의 그라디언트를 깔면, 이미지를 한 장도 읽지 않고 인상 있는 배경을 마련하실 수 있습니다. 표시 속도를 떨어뜨리지 않습니다.
스포트라이트 같은 연출
원형 그라디언트로 중심을 밝게, 바깥을 어둡게 하면 빛이 닿고 있는 듯한 표현이 됩니다.
이미지 위에 글자를 겹치기
사진 위에 반투명한 검정에서 투명으로 향하는 선형 그라디언트를 겹치면, 사진의 밝은 부분에서도 글자를 읽을 수 있게 됩니다.
CSS 그라디언트에 관한 용어집
- linear-gradient
- 지정한 각도를 따라 직선으로 색이 옮아 가는 그라디언트를 그리는 CSS의 함수입니다. 띠 모양의 배경이나 버튼의 칠에 알맞습니다.
- radial-gradient
- 중심점에서 바깥으로 원 또는 타원 모양으로 색이 퍼지는 그라디언트를 그리는 CSS의 함수입니다. 각도의 개념을 지니지 않습니다.
- 컬러 스톱
- 그라디언트 도중에 두는 ‘이 자리에 이 색’이라는 지정입니다. 위치는 시작점을 0%, 끝점을 100%로 하는 비율로 나타냅니다.
- 각도(deg)
- linear-gradient에서 색이 바뀌어 가는 방향입니다. CSS에서는 0deg가 아래에서 위, 90deg가 왼쪽에서 오른쪽이며 시계 방향으로 늘어납니다. 수학의 일반적인 각도와 0의 방향이 다릅니다.
- 벤더 프리픽스
-webkit-처럼, 표준화 전의 기능을 각 브라우저가 저마다 제공하던 때에 붙이던 접두사입니다. 그라디언트는 표준화가 끝났으므로 지금은 필요하지 않습니다.- background 속성
- 요소의 배경을 지정하는 CSS의 속성입니다. 그라디언트는 배경 이미지의 하나로 다루어지므로 여기에 씁니다.
자주 묻는 질문
여담 ― CSS 그라디언트가 이미지를 대체하게 된 이유
CSS3 이전의 웹 디자인에서는 그라디언트 배경을 표현하기 위해 이미지 편집 소프트웨어로 만든 PNG나 JPEG 이미지를 배경으로 사용하는 것이 일반적인 방법이었습니다. 그러나 이 방식은 이미지 로딩으로 인한 표시 속도 저하, 반응형 레이아웃에서 확대할 때 화질이 저하되는 문제, 색상 하나만 바꾸려 해도 이미지를 다시 만들어야 하는 낮은 유지보수성 등 여러 문제를 안고 있었습니다.
2010년대 초반 CSS3의 linear-gradient·radial-gradient 구문이 브라우저에 구현되면서 이러한 문제들이 대부분 해결되었습니다. 텍스트만으로 작성할 수 있어 가볍고, 확대·축소해도 화질이 저하되지 않으며, 색상 변경도 CSS 파일의 숫자 값만 바꾸면 완료됩니다.
초기 구현에서는 브라우저마다 서로 다른 벤더 프리픽스(-webkit-, -moz-, -o- 등)와 구문 차이가 있어 여러 개의 접두사 붙은 표기를 나란히 작성해야 했지만, 현재는 W3C의 표준화가 진행되어 모든 주요 브라우저에서 접두사 없는 표준 구문이 동작합니다.