CSS 그라데이션 생성기

선형 그라데이션은 직선(가로, 세로 또는 대각선)을 따라 색상을 전환하여 한 색상에서 다른 색상으로 방향이 바뀌는 흐름을 만듭니다. 방사형 그라디언트는 중심점에서 원형 또는 타원형 패턴으로 바깥쪽으로 방사합니다. 방향을 강조하고 현대적인 인터페이스를 만들려면 선형 그라데이션을 사용하고, 스포트라이트 효과, 버튼 또는 유기적인 시각적 흥미를 더하려면 방사형 그라데이션을 사용하세요.

그라데이션 각도를 0도부터 360도까지 설정하거나 '오른쪽으로', '아래쪽으로', '오른쪽 상단으로' 등의 키워드를 사용할 수 있습니다. 0도는 위쪽, 90도는 오른쪽, 180도는 아래쪽, 270도는 왼쪽을 가리킵니다. 각도에 따라 색상이 전환되는 축이 결정되므로 그라데이션 방향을 완벽하게 제어할 수 있습니다.

예! CSS 그라데이션은 무제한 색상 정지를 지원합니다. 여러 색상을 추가하여 복잡한 다중 색상 그라데이션을 만들 수 있습니다. 각 색상은 선택적 위치 비율(0%~100%)을 지정하여 그라데이션에서 표시되는 위치를 제어할 수 있습니다. 무지개 효과, 일몰 그라데이션 또는 정교한 색상 전환을 만드는 데 적합합니다.

색조, 채도 또는 명도가 비슷한 두 가지 색상을 사용합니다. 예를 들어 중간 파란색에서 약간 더 밝거나 어두운 파란색으로 전환합니다. 대비를 낮게 유지하고 밝기를 10~20%만 조정하는 HSL 값을 사용하는 것이 좋습니다. 미묘한 그라데이션은 콘텐츠를 압도하지 않으면서도 깊이와 시각적 흥미를 더합니다.

최신 CSS 그라데이션(선형 그라데이션 및 방사형 그라데이션 사용)은 공급업체 접두사 없이 현재 모든 브라우저에서 지원됩니다. 그러나 아주 오래된 브라우저(IE9 이하)를 지원해야 하는 경우 공급업체 접두사(-webkit-, -moz-, -o-) 또는 대체 단색이 필요할 수 있습니다. 최신 웹 개발의 경우 표준 CSS 그라데이션 구문은 모든 곳에서 작동합니다.

색상 정지를 균일하게 배치하고 급격한 색상 점프를 피하세요. 극단적인 색상 사이에 중간 색상 정지를 사용하여 더 부드러운 전환을 만듭니다. 방사형 그라데이션의 경우 모양(원 대 타원)과 위치를 실험해 보세요. 채도 및 명도 값이 비슷한 색상을 사용하거나 부드러운 색조 전환을 만들 수 있는 HSL 공간에서 작업하는 것이 좋습니다.

방사형 그라데이션은 원형(모든 방향이 동일) 또는 타원형(컨테이너에 맞게 늘어남)을 사용할 수 있습니다. 원은 스포트라이트 효과와 중앙 디자인에 적합하며, 타원은 직사각형 영역을 고르게 커버해야 하는 배경에 더 적합합니다. 모양 매개변수를 사용하여 이 동작을 제어할 수 있습니다.

예! 대각선 그라데이션에는 0도부터 360도 사이의 각도를 사용합니다. 45도는 왼쪽 아래에서 오른쪽 위까지 완벽한 대각선을 만들고, 135도는 오른쪽 아래에서 왼쪽 위까지 완벽한 대각선을 만듭니다. 대각선 그라데이션은 역동적인 시각적 흥미를 더하고 디자인에서 시선을 유도할 수 있습니다.

알파 채널이 있는 RGBA 또는 HSLA 색상 형식을 사용하여 투명하게 희미해지는 그라데이션을 만들 수 있습니다. 오버레이 효과, 이미지 마스크 또는 깊이감을 만들기에 적합합니다. 예를 들어 rgba(0,0,0,1)에서 rgba(0,0,0,0)으로 그라데이션하면 투명한 검정색으로 페이드됩니다.

색상 정지는 그라데이션에서 각 색상이 나타나는 위치를 제어합니다(0%~100%). 간격을 균일하게 배치하면 부드러운 전환을 만들 수 있고, 스톱을 한데 묶으면 선명한 색상 변화를 만들 수 있습니다. 예를 들어 두 색상을 50%로 배치하면 딱딱한 선이 만들어지고, 40%와 60%의 간격으로 배치하면 부드러운 혼합이 만들어집니다.