CSS 그라데이션 생성기

웹 페이지의 배경이나 버튼에 부드럽게 번지는 색을 넣고 싶을 때 가장 많이 쓰는 기법이 바로 CSS 그라데이션입니다. 이미지 파일을 따로 만들지 않아도 코드 몇 줄로 색이 자연스럽게 이어지는 면을 만들 수 있어서, 로딩 속도와 화질 모두에서 유리합니다. 문법이 처음엔 낯설어 보이지만 방향과 색만 이해하면 금방 손에 익습니다. 직접 색을 골라 가며 코드를 바로 뽑아 보고 싶다면 CSS 그라데이션 생성기를 함께 사용하면 편합니다. 이 글에서는 linear-gradient, radial-gradient, conic-gradient 세 가지 함수의 문법과 색 정지점(color stop) 지정법을 예시 코드로 정리합니다.

한눈에 보기

• CSS 그라데이션은 background(또는 background-image) 속성에 함수 형태로 지정합니다.
• linear-gradient는 직선 방향으로, radial-gradient는 중심에서 바깥으로, conic-gradient는 각도를 따라 색이 번집니다.
• 방향은 각도(0deg=위쪽, 90deg=오른쪽) 또는 to right·to bottom right 같은 키워드로 지정합니다.
• 색 정지점으로 각 색이 놓이는 위치를 퍼센트나 길이로 정할 수 있습니다.
• 색을 비슷한 명도로 맞추면 더 자연스러운 결과를 얻습니다.

그라데이션은 background와 background-image 중 어디에 넣나요? 둘 다 가능합니다. 그라데이션은 색이 아니라 이미지로 취급되기 때문에 background 단축 속성이나 background-image 속성에 함수를 넣습니다. background-color에는 넣을 수 없습니다.

방향은 각도와 키워드 중 무엇을 써야 하나요? 정해진 규칙은 없습니다. 90deg처럼 정밀하게 조정하고 싶을 때는 각도가, to right처럼 직관적으로 읽고 싶을 때는 키워드가 편합니다. 같은 결과를 둘 다로 표현할 수 있습니다.

색을 세 개 이상 넣을 수 있나요? 네. linear-gradient(red, yellow, green, blue)처럼 쉼표로 색을 계속 나열하면 됩니다. 색 정지점까지 함께 지정하면 각 색의 위치도 세밀하게 조절할 수 있습니다.

코드를 직접 짜기 어렵습니다. 더 쉬운 방법이 있나요? 색과 방향을 눈으로 보면서 조절하고 결과 코드를 바로 복사하는 CSS 그라데이션 생성기를 쓰면 문법을 외우지 않아도 됩니다.

지금까지 linear-gradient, radial-gradient, conic-gradient의 문법과 방향·색 정지점 지정법을 살펴봤습니다. 핵심은 "방향을 정하고, 색을 나열하고, 필요하면 위치를 붙인다"는 단순한 규칙입니다. 머릿속으로 그린 색을 코드로 바로 확인하고 싶다면 위 도구로 여러 조합을 실험해 보세요.