분류: 개발 도구
CSS 그라데이션 생성기
선형 또는 방사형 그라데이션을 만들고 CSS 복사
두세 가지 색을 고르고 각도를 조정해 실시간 미리보기를 확인한 뒤, 바로 붙여 넣을 수 있는 background-image 선언을 복사하세요. 모두 브라우저에서 렌더링됩니다.
출력
background-image: linear-gradient(135deg, #0f7b63 0%, #1f4f7a 100%);
이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.
이 도구로 할 수 있는 일
그라데이션은 손으로 적기보다 눈으로 확인하는 편이 빠릅니다. 그래서 이 도구는 값을 바꿀 때마다 실제 CSS를 미리보기 영역에 그대로 그립니다. 각도를 도 단위로 지정하는 선형 그라데이션이나 가운데에서 퍼지는 방사형 그라데이션을 고르고, 필요하면 중간 색을 더해 세 단계로 섞은 뒤 선언을 스타일시트에 그대로 복사하면 됩니다.
사용 방법
- 선형과 방사형 중에서 고릅니다.
- 시작 색과 끝 색을, 원하면 중간 색까지 고릅니다.
- 각도를 조정하고 CSS 선언을 복사합니다.
개인정보
이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.
자주 묻는 질문
- 업로드되는 것이 있나요?
- 없습니다. 미리보기는 브라우저가 칠하는 CSS 배경이고 선언도 페이지 안에서 만들어지므로 서버로 가는 것이 없습니다.
- 벤더 접두사가 필요한가요?
- 요즘 브라우저에서는 필요 없습니다. 접두사 없는 linear-gradient와 radial-gradient는 오래전부터 지원됩니다.
- 각도는 어느 방향인가요?
- CSS에서 0deg는 아래에서 위로 향하고 각도는 시계 방향으로 커집니다. 따라서 90deg는 왼쪽에서 오른쪽, 180deg는 위에서 아래입니다.