CSS 그라데이션 생성기

이 CSS 그래디언트 생성기는 실시간 미리보기와 바로 붙여넣을 수 있는 배경 선언을 통해 사용자가 제어하는 색상 정지점에서 선형 및 방사형 그래디언트를 구축해요. 막대를 따라 정지점을 끌고 각도나 모양을 설정하면 CSS가 즉시 업데이트돼요.

선택한 색상과 설정에 따라 모든 것이 브라우저에서 실행되므로 아무것도 업로드되지 않으며 결과를 복사하여 오프라인으로 사용할 수 있어요.

선형 그래디언트는 직선을 따라 색상을 혼합하고 각도에 따라 방향이 설정돼요. 0도는 위쪽, 90도는 오른쪽, 180도는 아래쪽을 가리켜요. 방사형 그래디언트는 원이나 타원처럼 중심에서 바깥쪽으로 혼합돼요.

둘 다 선형-그라디언트() 및 방사형-그라디언트()로 작성된 표준 CSS 값이며 둘 다 동일한 색상 정지 목록을 사용하므로 유형을 전환하면 색상이 유지되고 확산 방식만 변경돼요.

각 색상 정지점은 0%에서 100% 사이의 위치에 배치된 색상이에요. 그라데이션은 인접한 정류장 사이에서 부드럽게 혼합되므로 정류장의 위치는 색상이 최고조에 달하는 위치와 다음 색상으로 페이드되는 속도를 제어해요.

여러 색상 그라디언트를 만드는 데 필요한 만큼 정지점을 추가하고, 드래그하여 혼합을 미세 조정하거나, 막대를 클릭하여 원하는 위치에 새 정지점을 놓아요. 그라디언트에 필요한 최소값은 2스톱이에요.

생성된 코드를 복사하여 섹션, 카드, 버튼과 같은 요소의 배경으로 붙여 넣으세요. 최신 브라우저는 공급업체 접두사 없이 선형 그라데이션 및 방사형 그라데이션을 지원하므로 값은 그대로 작동해요.

그라디언트는 값일 뿐이므로 배경 이미지가 필요한 곳 어디에서나 사용할 수 있고 대체용으로 단색 위에 레이어할 수도 있고 일관된 모양을 위해 선형 및 방사형 버전에서 동일한 정지점을 재사용할 수도 있어요.