개발자 / CSS
CSS 그라데이션 생성기
실시간 미리보기와 필요한 만큼의 색상 중지점, 프리셋을 사용해 선형·방사형·원뿔형 그라데이션을 디자인한 다음 CSS를 복사합니다.
CSS 그라데이션 생성기: 생성기는 화면에 표시되는 그라데이션에 필요한 background 선언을 작성합니다. 각도와 함께 사용하는 linear-gradient, 중심에서 시작하는 원 또는 타원을 사용하는 radial-gradient, 시작 각도에서 원을 그리듯 펼쳐지는 conic-gradient 중 하나를 사용하며, 각 그라데이션의 색상 중지점을 순서대로 포함합니다. 그라데이션을 표시하지 못하는 오래된 브라우저를 위한 대체 색상은 첫 줄에 단색으로 추가됩니다. 새 색상은 가장 넓은 간격에 추가되며 양옆 색상을 혼합해 그라데이션이 갑자기 변하지 않도록 합니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.
- 카테고리
- 개발자 도구
- 실행 횟수
- 브라우저에서
- 비용
- 무료 · 가입 불필요
- 사용 가능 여부
- 사용 가능
브라우저에서 전부 실행됩니다
CSS
background: #ff7e5f; background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
첫 번째 줄은 매우 오래된 브라우저를 위한 단색이며, 현재 사용하는 모든 브라우저는 두 번째 줄의 그라데이션을 사용합니다.
프리셋
매끄러워 보이는 그라디언트
파란색에서 노란색으로 이어지는 것처럼 서로 매우 다른 색조를 섞으면 중간에 탁한 회색을 거칩니다. 중간에 더 밝은 색상의 중간 지점을 추가하면 생동감이 유지됩니다. 주황색에서 분홍색으로 이어지는 것처럼 서로 가까운 색조 사이의 그라디언트에는 도움이 필요한 경우가 거의 없습니다.
색상 변환기로 색상을 선택하거나 확인하고, 박스 그림자 생성기로 카드에 깊이감을 더하십시오.
그라디언트 위의 텍스트
텍스트가 그라디언트의 중간뿐 아니라 양쪽 끝에서도 읽기 쉬운지 확인하십시오. 흰색 텍스트를 사용하는 어두운 그라디언트나 어두운 텍스트 뒤에 놓는 은은한 그라디언트가 밝은 무지개색 그라디언트보다 안전합니다.
사용 방법
- 프리셋을 선택하거나 선형, 방사형, 원뿔형 중 하나를 선택합니다.
- 각도를 설정하고 색상과 위치를 조정합니다. 중지점을 더 추가하려면 색상을 추가합니다.
- CSS를 스타일시트에 복사합니다.
개인정보 보호 및 제한사항
모든 작업은 브라우저에서 실행됩니다. 마지막 그라데이션은 이 브라우저에만 저장됩니다.
관련 도구
자주 묻는 질문
선형 그라데이션에서 각도는 무엇을 의미합니까?
0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로, 180deg는 위에서 아래로, 270deg는 오른쪽에서 왼쪽으로 진행합니다. 그라데이션은 해당 방향을 따라 그려지므로 135deg는 왼쪽 위 모서리에서 오른쪽 아래 모서리로 진행합니다.
색상 중지점이란 무엇입니까?
그라데이션을 따라 0%에서 100% 사이의 특정 위치에 도달했을 때 표시되는 색상과 위치입니다. 두 중지점 사이에서는 색상이 혼합됩니다. 같은 위치에 두 중지점을 배치하면 색상이 혼합되지 않고 경계가 생기며, 이를 통해 줄무늬를 만들 수 있습니다.
원뿔형 그라데이션은 방사형 그라데이션과 어떻게 다릅니까?
방사형 그라데이션은 중심에서 바깥쪽으로 고리 모양으로 퍼지며 색상이 변합니다. 원뿔형 그라데이션은 시계 바늘처럼 중심 주위를 돌며 색상이 변하므로 색상환과 원형 차트에 유용합니다.
여전히 -webkit- 접두사가 필요합니까?
아니요. 현재 사용되는 모든 브라우저는 접두사 없이 linear-gradient와 radial-gradient를 지원하며, conic-gradient도 2021년부터 모든 브라우저에서 작동했습니다. 첫 줄의 대체 색상은 훨씬 오래된 브라우저를 위한 것입니다.
무료 도구 · 브라우저에서회 실행 · 계정 불필요