CSS 그라데이션 생성 무료 온라인 도구. 선형·원형 그라데이션, 방향·색상·정지점 조절. 코드 복사 가능. 브라우저 처리.
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);Ctrl+D 를 눌러 이 페이지를 즐겨찾기에 추가하세요
CSS 그라데이션을 생성하는 무료 온라인 도구입니다. 선형, 방사형, 원뿔형 그라데이션을 시각적으로 디자인하고 CSS 코드를 즉시 복사할 수 있습니다. 브라우저에서 직접 처리되며 서버 전송이 없습니다. 웹 디자인 배경, 버튼, UI 요소에 최적입니다.
선형(linear), 방사형(radial), 원뿔형(conic) 그라데이션을 지원합니다.
네, 생성된 CSS gradient 코드를 원클릭으로 복사하여 바로 웹사이트에 적용할 수 있습니다.
색상환에서 서로 반대편에 있는 두 색을 섞으면 중간에서 채도가 0에 가까워지면서 탁한 회색이 지나갑니다. 파랑과 주황, 빨강과 초록 조합에서 특히 잘 나타납니다. 두 색 사이에 중간 색상 하나를 정지점으로 추가하면 회색을 피해 돌아갈 수 있고, 애초에 색상환에서 가까운 두 색을 고르면 이 문제가 생기지 않습니다.
네, PNG로 내려받을 수 있어 슬라이드 배경이나 SNS 이미지, 인쇄물에 바로 쓸 수 있습니다. 웹페이지에 넣을 목적이라면 이미지보다 CSS 코드를 그대로 쓰는 편이 훨씬 낫습니다. 파일을 내려받을 필요가 없어 로딩이 빠르고, 화면 크기가 달라져도 깨지지 않으며, 확대해도 계단 현상이 생기지 않기 때문입니다.