CSS 그라디언트 생성기

각 그라디언트는 여러 레이어를 가질 수 있고, 레이어마다 유형, 각도, 색상을 따로 설정할 수 있습니다. 결과는 벤더 접두사 없는 순수 CSS로, 프로젝트에 바로 붙여 넣을 수 있습니다. 페이지 링크에 그라디언트가 저장되므로 공유하거나 나중에 다시 열 수 있습니다.

그라디언트 생성기 사용법

그라디언트 유형 선택
레이어마다 선형, 방사형, 원뿔형 중 하나를 고르세요. 선형은 직선을 따라 색을 섞고, 방사형은 중심점에서 퍼뜨리며, 원뿔형은 중심을 기준으로 회전시킵니다.

색상과 레이어 조정
색상 바를 클릭해 색상 정지점을 추가하고, 드래그해 위치를 바꾸고, 투명도를 포함한 원하는 색을 지정하세요. 레이어 추가 버튼으로 다른 그라디언트를 위에 겹칠 수 있습니다.

디자인 미리보기
전체 화면, 정사각형, 가로·세로 직사각형, 원, 별 등 6가지 모양에서 그라디언트를 확인하세요. 모양 뒤의 배경도 바꿀 수 있습니다.