CSS 그라디언트 생성기 - 선형, 방사형, 원뿔형 그라데이션 CSS 코드를 생성하세요. 색상, 방향, 위치 조절, 프리셋 제공.
CSS에서 3가지 그라디언트를 지원합니다. linear-gradient: 직선 방향으로 색상이 전환됩니다. 방향(to right, 45deg)과 색상 정지점을 지정합니다. radial-gradient: 중심에서 바깥으로 원형/타원형으로 전환됩니다. conic-gradient: 중심점을 기준으로 각도에 따라 전환되며 파이 차트 등에 활용됩니다. 여러 색상 정지점을 추가하여 복잡한 그라디언트를 만들 수 있습니다.
CSS의 background 속성에서 그라디언트와 이미지를 콤마로 구분하여 겹칠 수 있습니다. 예: background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url('image.jpg'). 그라디언트가 먼저 오면 이미지 위에 오버레이됩니다. 이 기법은 히어로 섹션에서 텍스트 가독성을 높이는 데 자주 사용됩니다.
CSS 그라디언트 생성기는 선형(linear), 방사형(radial), 원뿔형(conic) 그라데이션 CSS 코드를 직관적인 UI로 만들어주는 웹 디자인 도구입니다. 색상 조합과 방향을 마우스로 조정하면 실시간으로 미리보기와 완성된 CSS 코드가 생성되어, 복잡한 그라디언트 문법을 직접 외울 필요 없이 원하는 배경 효과를 즉시 구현할 수 있습니다.