그라데이션 생성기

선형, 방사형 또는 원추형 그라데이션을 만들고, 색상 중단점을 추가하고 방향을 설정하여 클릭 한 번으로 CSS를 복사해 보세요.

그라데이션 종류
색상 중단점
CSS
중단점과 방향을 조절하여 그라데이션을 디자인해 보세요.

모든 그라데이션은 브라우저에서 직접 렌더링됩니다. 설정한 어떤 데이터도 BroBroGo 서버로 전송되지 않습니다.

자주 묻는 질문

선형, 방사형, 원추형 그라데이션의 차이는 무엇인가요?

선형(linear) 그라데이션은 설정한 각도의 직선을 따라 색상을 혼합합니다. 방사형(radial) 그라데이션은 중심에서 바깥쪽으로 원형 또는 타원형으로 색상을 퍼뜨립니다. 원추형(conic) 그라데이션은 색상표처럼 중심을 기준으로 시계 방향으로 색상을 돌리며 배치합니다.

색상 중단점(color stop)이란 무엇인가요?

각 색상 중단점(color stop)은 그라데이션 경로를 따라 특정 위치(시작점 0%에서 끝점 100% 사이)에 고정된 색상입니다. 중단점을 이동하여 색상이 가장 짙어지는 위치를 바꾸거나, 중단점을 추가하여 더 다채로운 혼합을 만들어 보세요. 최대 8개까지 사용할 수 있습니다.

그라데이션 방향은 어떻게 조절하나요?

선형(linear) 또는 원추형(conic) 그라데이션의 경우, 각도 슬라이더로 방향을 설정합니다. 0°는 위쪽, 90°는 오른쪽을 향합니다. 방사형(radial) 그라데이션에는 각도가 없으므로, 대신 원형(circle) 또는 타원형(ellipse) 모양을 선택하여 퍼지는 방식을 변경하세요.

CSS Cubic Bezier 생성기두 핸들을 드래그하여 이징 곡선을 만들고, 등속 운동과 비교하는 실시간 애니메이션을 확인한 뒤 cubic-bezier() 값을 복사해 보세요.Box Shadow 생성기슬라이더를 드래그하여 박스 그림자를 만들고, 레이어를 쌓아 깊이감을 더한 뒤 완성된 CSS를 즉시 복사해 보세요.Border Radius 생성기슬라이더로 각 모서리를 둥글게 깎고, 타원형 모드로 유기적인 물방울 모양을 디자인하여 CSS를 즉시 복사해 보세요.Flexbox 생성기시각적 컨트롤러로 flex 컨테이너와 아이템을 구성하고, 실시간으로 반응하는 레이아웃을 확인한 뒤 클릭 한 번으로 CSS를 복사해 보세요.CSS Grid 생성기열과 행을 설정하고, 셀 위를 드래그하여 아이템을 배치한 뒤, 클릭 한 번으로 그리드 CSS와 매칭되는 HTML 코드를 복사해 보세요.CSS clamp() 계산기소형 및 대형 화면에서의 크기를 입력하면 그 사이에서 부드럽게 변하는 유동적인 clamp() 값을 생성해 줍니다. 글자 크기, 패딩, 마진, 갭 등에 활용해 보세요.색상 변환기HEX, RGB, HSL, HSV, CMYK, LAB 간 색상 변환 — 한 필드를 수정하면 나머지도 실시간으로 자동 업데이트됩니다.CSS 정렬 및 압축기지저분한 CSS의 들여쓰기를 정리하여 가독성을 높이거나, 규칙 순서를 변경하지 않는 안전 모드로 코드를 압축하여 배포해 보세요.웹 접근성 명도 대비 검사기텍스트 색상과 배경 색상을 입력하여 WCAG 명도 대비 비율과 AA/AAA 통과 여부를 실시간으로 확인해 보세요.