개발자 도구
CSS 그라데이션 생성기 - linear / radial 코드 생성
색상과 각도를 조절해 선형과 방사형 그라데이션을 만들고 CSS 코드를 바로 복사하세요.
그라데이션, 코드로 직접 짜기 어렵죠
CSS 그라데이션은 색상 정지점과 각도를 숫자로 계산해야 해서, 원하는 결과가 나올 때까지 여러 번 고쳐야 합니다. 이 도구는 색상과 각도, 종류를 시각적으로 조절해 그라데이션을 만들고 그에 대응하는 CSS 코드를 즉시 복사할 수 있게 해줍니다.
히어로 영역, 버튼, 배경에 그라데이션을 넣으면 화면이 훨씬 생동감 있게 바뀝니다. 만든 코드를 그대로 붙여넣기만 하면 됩니다.
이런 분들께 특히 유용합니다
- 웹 디자이너·퍼블리셔 — 버튼과 배경에 그라데이션을 넣을 때
- 프런트엔드 개발자 — CSS 코드를 빠르게 만들 때
- 코딩을 배우는 분 — 그라데이션 속성을 이해할 때
자주 묻는 질문
기본적으로 시작색과 끝색 두 가지를 제공합니다. 생성된 코드의 색상 정지점을 직접 늘려 3개 이상의 색으로 확장할 수 있습니다.
방사형 그라데이션은 중심에서 바깥으로 퍼지는 형태라 각도 설정이 의미가 없습니다. 종류를 방사형으로 바꾸면 각도 슬라이더는 자동으로 숨겨집니다.
생성되는 linear-gradient와 radial-gradient는 현대 브라우저에서 벤더 프리픽스 없이 동작합니다. 구형 브라우저 지원이 필요하면 별도로 접두사를 추가해 주세요.
이 페이지 공유하기