CSS 그라디언트 생성기

눈으로 보며 그라디언트를 만들고 CSS를 복사하세요.

핸들을 드래그해 정지점을 옮기거나 막대를 클릭해 추가하세요. 화살표 키로도 핸들을 움직일 수 있습니다.

135

색상 정지점

  • %
  • %
  • %

브라우저에서 실행됩니다. 입력한 내용은 어디로도 전송되지 않습니다.

CSS 그라디언트 만드는 방법

  1. 프리셋을 고르거나 각 정지점의 색상을 정하세요.
  2. 막대 위 핸들을 드래그하고, 막대를 클릭해 정지점을 추가하세요.
  3. CSS를 복사해 스타일시트에 붙여넣으세요.

그라디언트 종류 비교

종류퍼지는 방식CSS 함수
선형정해진 각도의 직선을 따라linear-gradient()
원형중심점에서 바깥으로radial-gradient()
원뿔형색상환처럼 중심점 둘레를 회전conic-gradient()

그라디언트 종류별 브라우저 지원

그라디언트 종류최소 요구 버전
선형, 원형현재 모든 브라우저, 접두사를 붙이면 IE10까지
원뿔형Chrome 69, Firefox 83, Safari 12.1

이 페이지가 만드는 CSS는 항상 단순한 background-color 줄로 시작하므로, 그라디언트를 그릴 수 없는 브라우저에서도 빈 박스 대신 첫 정지점의 색이 표시됩니다.

더 매끄러운 그라디언트를 위한 팁

  • 가운데에 세 번째 정지점을 추가하면 단조로운 2색 그라디언트 대신 세 번째 색을 거쳐 섞이는 느낌을 낼 수 있습니다.
  • 섞이지 않고 뚜렷한 경계를 원한다면 이웃한 두 정지점을 같은 위치에 두세요.
  • 0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로 향합니다. 어떤 각도든 180을 더하면 정지점을 다시 입력하지 않고도 방향을 반대로 바꿀 수 있습니다.
  • 원형 모양은 박스에 맞추세요. 정사각형 요소에는 circle을, 가로로 넓은 요소에는 ellipse를 쓰면 그라디언트가 늘어져 보이지 않습니다.

CSS 그라디언트 생성기 자주 묻는 질문

CSS에서 그라디언트는 어떻게 만드나요?

background: linear-gradient(90deg, #ff7e5f, #feb47b)처럼 background 속성에 그라디언트 함수를 지정하세요. 첫 값은 방향이고 이어서 각각 위치를 지정할 수 있는 색상이 옵니다.

선형, 원형, 원뿔형 그라디언트의 차이는 무엇인가요?

선형 그라디언트는 직선을 따라 색이 바뀌고, 원형 그라디언트는 중심점에서 바깥으로 퍼지며, 원뿔형 그라디언트는 색상환이나 파이 차트처럼 중심점을 축으로 회전합니다.

각도는 어느 방향을 가리키나요?

0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로, 180deg는 위에서 아래로, 270deg는 오른쪽에서 왼쪽으로 향합니다. 원뿔형 그라디언트에서는 각도가 회전이 시작되는 위치를 정합니다.

두 색 사이에 뚜렷한 경계선을 만들려면?

이웃한 두 정지점을 같은 위치로 두세요. 예를 들어 빨강을 50%, 파랑도 50%로 두면 그 지점에서 섞이지 않고 색이 바로 바뀝니다.

CSS 그라디언트는 모든 브라우저에서 작동하나요?

선형과 원형 그라디언트는 현재 모든 브라우저에서 작동합니다. 원뿔형 그라디언트는 Chrome 69, Firefox 83, Safari 12.1 이상이 필요합니다. 여기서 만든 CSS는 대체용 단색 줄로 시작합니다.

CSS 그라디언트에 애니메이션을 줄 수 있나요?

큰 그라디언트의 background-position이나 background-size에 애니메이션을 주면 움직이는 효과를 낼 수 있습니다. 정지점 색상 자체에 애니메이션을 주려면 CSS @property 규칙이나 작은 스크립트가 필요합니다. 브라우저가 두 그라디언트 값 사이를 스스로 보간하지 못하기 때문입니다.

그라디언트를 글자 색으로 쓸 수 있나요?

네. 여기서 만든 그라디언트 CSS를 배경으로 설정한 뒤 텍스트 요소에 background-clip: text와 color: transparent를 추가하면, 박스를 채우는 대신 글자 사이로 그라디언트가 비쳐 보입니다.

관련 도구