그래디언트 생성기

CSS 그래디언트를 시각적으로 생성하고 코드를 복사하세요

그래디언트 타입

색상 스톱

0%

100%

각도

135°

방향 프리셋

CSS 코드background: linear-gradient(135deg, #137fec 0%, #0d5bbd 100%);

프리셋 그래디언트

사용 방법

그래디언트 타입(선형/원형)을 선택하세요

색상을 선택하고 위치를 조절하세요

각도나 방향을 설정하세요

CSS 코드를 복사하여 프로젝트에 적용하세요

그래디언트 팁

비슷한 톤의 색상을 사용하면 자연스러운 그래디언트를 만들 수 있습니다
135도 각도가 가장 보편적이고 세련된 느낌을 줍니다
3개 이상의 색상을 사용할 때는 위치를 균등하게 분배하세요
다크모드에서는 채도가 낮은 색상이 잘 어울립니다

자주 묻는 질문

CSS 그래디언트란?

CSS 그래디언트는 두 개 이상의 색상 사이를 부드럽게 전환하는 배경 효과입니다. linear-gradient(선형)와 radial-gradient(원형) 두 가지 주요 타입이 있습니다.

색상 스톱이란?

색상 스톱은 그래디언트에서 특정 색상이 위치하는 지점입니다. 0%는 시작점, 100%는 끝점이며, 중간에 여러 색상 스톱을 추가할 수 있습니다.

그래디언트를 어디에 사용하나요?

웹사이트 배경, 버튼, 카드, 헤더, 텍스트 효과 등 다양한 UI 요소에 사용할 수 있습니다. background 속성에 CSS 코드를 적용하면 됩니다.

관련 도구

그림자 생성기 보더 라디우스 생성기 색상 코드 변환

링크가 복사되었습니다!