CSS Gradient Generator

아름다운 CSS 그래디언트를 시각적으로 만들어요. 색상을 선택하고 각도를 조정한 후 CSS 코드를 복사하세요. 모든 작업이 브라우저에서 이루어져요.

작동 방식: 그래디언트 유형을 선택하고, 색상과 각도를 조정한 후 CSS를 복사해요. 미리보기가 실시간으로 업데이트돼요. 색상 stop을 클릭하면 색상이나 위치를 변경할 수 있어요. 어떤 데이터도 서버로 전송되지 않아요.

0°90°180°270°360°
0%
100%
background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);

CSS 그래디언트란 뭐예요?

CSS 그래디언트는 두 가지 이상의 색상 사이의 부드러운 전환을 브라우저에서 렌더링한 거예요. background-image 속성과 gradient 함수를 사용해서 만들어요. 그래디언트는 배경, 테두리, 텍스트 효과, 장식 요소에 사용할 수 있어요. 이미지 파일과 달리 CSS 그래디언트는 해상도에 독립적이고 가벼우며 transition으로 애니메이션할 수 있어요.

Linear와 Radial 그래디언트의 차이

Linear 그래디언트는 각도나 방향(예: to right, 45deg)으로 정의된 직선을 따라 색상을 전환해요. Radial 그래디언트는 중심점에서 바깥쪽으로 원형 또는 타원형으로 색상을 전환해요. Linear 그래디언트는 배경과 섹션 구분선에 가장 많이 사용되고, Radial 그래디언트는 스포트라이트 효과와 원형 장식에 잘 어울려요.

Color Stop 다루기

Color stop은 그래디언트에서 각 색상이 나타나는 위치를 정의해요. 각 stop은 색상 값과 선택적 위치(백분율 또는 길이)를 가져요. 여러 개의 stop을 추가해서 복잡한 다중 색상 그래디언트를 만들 수 있어요. 위치는 색상이 완전히 적용되는 위치를 결정하고, 브라우저가 stop 사이를 부드럽게 보간해요. 같은 위치의 stop은 하드한 색상 경계를 만들어요.

그래디언트 베스트 프랙티스

  • 깔끔하고 전문적인 그래디언트를 위해 2-3개의 color stop을 사용해요
  • 미묘한 그래디언트를 위해 유사 색상을 고수해요
  • 대담하고 눈에 띄는 효과를 위해 보색을 사용해요
  • 밝은 배경과 어두운 배경 모두에서 그래디언트를 테스트해요
  • 이전 브라우저를 위해 background-color 폴백을 추가해요
  • 재사용 가능한 그래디언트 테마를 위해 CSS custom property를 사용해요