CSS 그래디언트를 시각적으로 생성하고 코드를 복사하세요
background: linear-gradient(135deg, #137fec 0%, #0d5bbd 100%);그래디언트 타입(선형/원형)을 선택하세요
색상을 선택하고 위치를 조절하세요
각도나 방향을 설정하세요
CSS 코드를 복사하여 프로젝트에 적용하세요
CSS 그래디언트는 두 개 이상의 색상 사이를 부드럽게 전환하는 배경 효과입니다. linear-gradient(선형)와 radial-gradient(원형) 두 가지 주요 타입이 있습니다.
색상 스톱은 그래디언트에서 특정 색상이 위치하는 지점입니다. 0%는 시작점, 100%는 끝점이며, 중간에 여러 색상 스톱을 추가할 수 있습니다.
웹사이트 배경, 버튼, 카드, 헤더, 텍스트 효과 등 다양한 UI 요소에 사용할 수 있습니다. background 속성에 CSS 코드를 적용하면 됩니다.
CSS 그라데이션은 크게 선형(linear-gradient)과 원형(radial-gradient) 두 가지로 나뉩니다. 선형 그라데이션은 한 방향으로 색상이 흐르며, 각도를 0deg~360deg로 지정해 다양한 방향의 흐름을 연출할 수 있습니다. 원형 그라데이션은 중심점에서 바깥쪽으로 색상이 퍼져나가며, circle(원형)과 ellipse(타원형) 중 선택할 수 있습니다. 각 유형은 배경 이미지의 background 속성에 직접 적용되므로 이미지 없이도 풍부한 색감을 표현할 수 있습니다.
색상 스톱(color stop)은 그라데이션 내에서 특정 색상이 시작하거나 끝나는 지점을 백분율(%)로 지정합니다. 두 가지 색상만 쓰면 단순한 전환이 만들어지지만, 세 가지 이상의 스톱을 추가하면 무지개나 일몰처럼 복잡한 색상 전환도 구현할 수 있습니다. 스톱 위치를 좁게 배치하면 색상 경계가 뚜렷해지고, 넓게 배치하면 자연스럽게 번집니다.
그라데이션은 버튼, 카드, 섹션 배경, 텍스트 마스크 등 다양한 UI 요소에 폭넓게 쓰입니다. 단색 배경에 비해 깊이감과 생동감을 더해주며, 브랜드 컬러 두 가지를 사용한 그라데이션 버튼은 클릭 유도(CTA)에 효과적입니다. 또한 background-image에 여러 그라데이션을 쉼표로 나열해 겹쳐 쌓을 수 있어 더욱 복잡한 시각적 효과를 낼 수 있습니다.