CSS 그라디언트 생성기

실시간 미리보기로 CSS 그라디언트 만들기

선형 또는 방사형 그라디언트를 고르고 각도를 정한 뒤 색상 정지점을 원하는 만큼 추가하면 큰 미리보기가 실시간으로 갱신됩니다. 바로 붙여넣을 수 있는 background CSS를 한 번에 복사하거나 프리셋에서 시작하세요. 모든 작업은 브라우저 안에서만 이뤄지며 로그인이나 백엔드가 필요 없습니다.

그라디언트 유형

각도90°

색상 정지점

#ff0080%

#7928ca%

미리보기

CSS

background: linear-gradient(90deg, #ff0080 0%, #7928ca 100%);

팁: 전부 브라우저 안에서 동작하며 아무 데도 전송하지 않습니다. 선형·방사형을 고르고 각도를 조절하고 색상 정지점을 추가·삭제하면, CSS가 실시간으로 갱신되고 한 번에 복사됩니다.

프리셋