CSS 그라디언트 생성기
CSS 그라디언트를 라이브 미리보기로 시각적으로 생성합니다. linear, radial, conic 그라디언트 지원. 컬러 스톱 추가 후 CSS 코드 복사. 무료, 100% 브라우저에서 실행.
유형
90°
컬러 스톱
CSS 출력
참고
CSS 그라디언트란?
CSS 그라디언트는 두 개 이상의 색상 간의 부드러운 전환을 보여주는 이미지입니다. background-image 속성에서 사용되며, 리니어(직선), 레이디얼(방사형), 코닉(원뿔형)의 세 가지 유형이 있습니다. 벡터 기반이므로 어떤 해상도에서도 선명하게 표시됩니다.
그라디언트 유형
linear-gradient — 직선 방향으로 색상을 전환. 각도 또는 방향 키워드로 제어. radial-gradient — 중심에서 바깥쪽으로 방사형 색상 전환. conic-gradient — 중심점을 기준으로 원뿔형 색상 전환. 원형 차트 제작에 유용.
컬러 스톱
컬러 스톱은 그라디언트에서 색상이 배치되는 위치를 정의합니다. 각 스톱은 색상과 선택적 퍼센트 위치로 구성됩니다. 스톱을 추가할수록 복잡한 그라디언트를 만들 수 있습니다. 스톱 사이의 색상은 자동으로 보간됩니다.
개인정보보호
모든 그라디언트 생성은 브라우저에서 100% 실행됩니다. 데이터는 서버에 전송되지 않습니다.