CSS 그라데이션 생성기
배경 그라데이션을 눈으로 보며 디자인하고 바로 쓸 수 있는 CSS를 복사하세요. 막대를 따라 색상 중지점을 드래그하고, 막대를 클릭해 중지점을 추가하고, 각도나 중심을 바꾸고, 색을 투명하게 만들 수 있습니다. 코드에는 오래된 브라우저를 위한 단색 대체 색상이 포함됩니다.
°
%
%
%
%
프리셋 사용 방법
- 선형, 원형, 원뿔형 중에서 선택하거나 프리셋 또는 무작위 그라데이션으로 시작하세요.
- 중지점을 클릭해 색상, 불투명도, 위치를 편집하세요. 드래그해서 옮기거나 막대를 클릭해 하나 더 추가할 수 있습니다.
- CSS를 복사하여 요소의 규칙에 붙여넣으세요.
자주 묻는 질문
선형, 원형, 원뿔형 그라데이션은 어떻게 다른가요?
선형 그라데이션은 선택한 각도의 직선을 따라 색이 변합니다. 원형 그라데이션은 중심에서 원이나 타원 모양으로 퍼져 나갑니다. 원뿔형 그라데이션은 시계 바늘처럼 중심을 따라 회전하며 색상환이나 원형 차트에 유용합니다.
CSS 그라데이션은 모든 브라우저에서 작동하나요?
네. 선형, 원형, 원뿔형 그라데이션은 Chrome, Edge, Firefox, Safari의 최신 버전에서 접두사 없이 작동합니다. 첫 번째 background 줄은 단색이며, 아주 오래된 브라우저에서만 사용됩니다.
줄무늬는 어떻게 만드나요?
각 줄무늬의 시작과 끝에 같은 색의 중지점을 두 개 놓으면 색이 섞이지 않고 갑자기 바뀝니다. 그런 다음 반복을 켜세요. 마지막 프리셋이 예시입니다.
🏷️ 메타 태그 생성기
🖼️ 오픈 그래프(OG) 태그 생성기
🔗 UTM 링크 생성기
🔲 CSS 박스 섀도 생성기