CSS 그라데이션을 시각적으로 제작하세요. 선형, 방사형, 원뿔형 그라데이션의 색상 스톱, 불투명도 및 위치를 설정하고, 바로 사용할 수 있는 CSS 코드를 복사하세요.
CSS 그라데이션은 래스터 파일이 아닌 수학적 표현을 바탕으로 브라우저에서 생성되는 이미지입니다. 주요 유형으로는 선형(직선을 따라 색상이 변하는 방식), 방사형(중심점을 기준으로 바깥쪽으로 색상이 변하는 방식), 원뿔형(중심점을 중심으로 각도에 따라 색상이 변하는 방식)의 세 가지가 있습니다. 각 유형은 임의의 개수의 컬러 스톱을 지원하며, 각 컬러 스톱에는 선택적인 불투명도 값과 명시적 또는 자동 위치가 지정될 수 있습니다.
그라데이션 유형을 선택한 다음, 색상 선택기 및 불투명도 조절 기능을 사용하여 색상 스톱을 설정하세요. 선형 그라데이션의 경우 각도를 설정하거나 방향 단축키를 사용하세요. 방사형 및 원뿔형 그라디트의 경우 중심 위치와 크기 또는 시작 각도를 설정하세요. 미리 보기는 실시간으로 업데이트됩니다. 그라디트가 만족스럽게 보이면 생성된 CSS 속성을 복사하여 스타일시트에 직접 붙여넣으세요. 기존 그라디트 문자열을 '가져오기' 패널에 붙여넣어 편집할 수도 있습니다.
CSS 그라데이션을 사용하면 배경이나 장식 요소에 이미지 파일을 사용할 필요가 없어져 페이지 용량을 줄일 수 있을 뿐만 아니라, 어떤 해상도에서도 선명한 색상을 유지할 수 있습니다. 불투명도 조절 기능을 활용하여 글라스모피즘 효과를 위한 반투명한 컬러 스톱을 만들거나, 단색을 투명하게 서서히 변하게 할 수 있습니다. 원뿔형 그라데이션은 자바스크립트 없이 파이 차트 스타일의 진행률 표시기를 만드는 데 유용합니다.