CSS 그라디언트 생성기
두 색상과 각도로 CSS linear-gradient·radial-gradient 코드를 만들고 실시간 미리보기로 확인합니다. 중간색 정보도 제공하며 모든 처리는 브라우저에서만 이루어집니다.
- CSS
- background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
- 중간색
- #a857c5
자주 묻는 질문
각도는 어떤 방향인가요?
CSS 각도는 0°가 아래→위, 90°가 왼쪽→오른쪽, 180°가 위→아래 방향입니다. 대각선 그라디언트는 45° 또는 135°를 많이 씁니다.
3색 이상 그라디언트도 만들 수 있나요?
생성된 코드에 색상 정지점을 직접 추가하면 됩니다. 예: linear-gradient(90deg, #a 0%, #b 50%, #c 100%). 중간색 값을 50% 지점에 넣으면 자연스러운 3색 그라디언트가 됩니다.
그라디언트가 계단처럼 끊겨 보여요.
명도 차이가 큰 두 색을 넓은 영역에 펼치면 밴딩이 생길 수 있습니다. 중간 색상 정지점을 추가하거나 색상 차이를 줄이면 완화됩니다.
관련 도구
오프셋·블러·확산·색상·투명도를 조절해 CSS box-shadow 코드를 만들고 실시간 미리보기로 확인합니다. inset 안쪽 그림자를 지원하며 모든 처리는 브라우저에서만 이루어집니다.
기준 색상에서 밝은 톤과 어두운 톤의 HEX 팔레트를 생성합니다. 디자인 시스템의 색 단계를 만들 때 유용하며 모든 처리는 브라우저에서만 이루어집니다.
HEX, RGB, HSL 색상 코드를 상호 변환하고 미리보기로 확인합니다.
텍스트와 배경 색상의 대비율을 계산하고 WCAG 2.x AA·AAA 접근성 기준 통과 여부를 판정합니다. 웹 접근성 점검에 유용하며 모든 계산은 브라우저에서만 이루어집니다.
최소·최대 크기와 뷰포트 범위로 반응형 clamp() 코드를 만듭니다. 미디어쿼리 없이 폰트 크기가 화면 폭에 따라 부드럽게 변하는 fluid typography에 사용합니다. 모든 계산은 브라우저에서만 이루어집니다.
CSS에서 주석과 불필요한 공백을 제거해 파일 크기를 줄입니다. 문자열 값은 보존하며 모든 처리는 브라우저에서만 이루어집니다.