무료 CSS 그라데이션 생성기 온라인

CSS 그라데이션 은 배경, 버튼, 카드를 꾸미는 가장 가볍고 유연한 방법이 되었습니다. 이미지 에디터에서 PNG를 내보낼 필요가 없습니다. 브라우저가 벡터로 몇십 바이트 안에 색상 전환을 계산합니다. CSS 그라데이션 생성기 의 Volade 는 화면에서 구성하는 동안 정확한 코드 — 각도, 스톱, 원점 위치 — 를 생성합니다.

linear-gradient: 방향성 그라데이션

함수 linear-gradient() 는 각도 뒤에 스톱을 받습니다: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%). 각도 0deg 는 위를 가리키고, 90deg 는 오른쪽을, 180deg 는 아래를 가리킵니다. 각도가 없으면 브라우저는 위에서 아래로 진행합니다. 이는 헤더, 호출-to-action 버튼, 섹션 배너에 가장 많이 사용되는 구문입니다.

radial-gradient: 환영과 타원

함수 radial-gradient() 는 점(기본값은 중심)에서 시작해 원 또는 타원으로 퍼집니다. 원점 위치는 at X% Y%로 표시합니다: radial-gradient(circle at 50% 50%, …). 제목 뒤의 환영 효과, 중앙을 겨냥한 히어로 배경, 부드러운 그림자 시뮬레이션에 완벽합니다. 도구는 X와 Y 두 슬라이더로 원점을 픽셀 단위로 설정할 수 있게 합니다.

conic-gradient: 중심점 주위 회전

함수 conic-gradient() 는 시계 바늘이나 중심점 주위를 돕니다. conic-gradient(from 90deg at 50% 50%, …)로 작성하며 링, 원형 게이지, 컬러 테두리, 프리즘 효과를 만들 수 있습니다. 각 스톱이 각도 부문을 차지합니다. 여러 색상을 배치하면 이미지 없이 CSS 도넛 차트를 그릴 수 있습니다.

색상 스톱(color stops)

각 스톱 는 색상과 백분율 위치를 연결합니다: #7a2fe2 0%, #a358ee 55%, #f3e8ff 100%. 두 색상에 동일한 위치를 지정하면 뚜렷한 전환 (하드 엣지)가 생성됩니다. 멀리 떨어진 위치는 점진적인 페이드를 만듭니다. 두 개 이상의 스톱은 다중 색상 팔레트, 띠, 재질 시뮬레이션(금색, 진주, 오로라)을 가능하게 합니다.

그라데이션 겹치기 및 대체 값 준비

축약형 background에서 순서가 중요합니다: 전경이 먼저. 사진 위의 어두운 오버레이는 background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);로 작성합니다. 항상 단색 를 대체 값(background-color)으로 두세요. 매우 오래된 브라우저나 이미지 로딩 중을 위해.

성능 모범 사례

CSS 그라데이션은 크기 조절할 때마다 다시 계산됩니다. 스톱 수를 적절히 유지하세요(90%의 경우 2~5개면 충분). 모바일에서 매우 큰 영역에 다중 겹침을 피하세요. 다음 값을 선호하세요: 16진수 또는 HSL 안정적인 값으로 설정하고, 디자인이 확정되면 각도를 고정하여 브라우저 간 미세한 차이를 방지하세요.

Volade 브랜드에 맞는 그라데이션

그라데이션을 적용하기 전에 일관된 팔레트를 만들려면 팔레트 생성기 와 색상 선택기 을(를) 함께 사용하세요: 브랜드 색상을 찾아 여기에 스톱으로 붙여넣으세요. 결과는 CSS, 디자인 시스템 또는 테마에 직접 복사됩니다. 컴퓨터와 모바일 모두에서 계정 없이, 데이터 전송 없이 사용할 수 있습니다.