종류, 시작 색상, 끝 색상, 각도, 중간 지점
linear
- CSS
- background: linear-gradient(135deg, #0F172A 0%, #38BDF8 100%);
- 시작 색상
- #0F172A
- 끝 색상
- #38BDF8
- 중간 지점
- 100%
계산 방법과 기준
CSS gradient는 이미지 값으로 취급되며 background-image/background에 바로 사용할 수 있습니다. 각도, 색상, 중간 지점을 조합해 복사 가능한 CSS와 미리보기를 제공합니다.
계산식과 처리 기준
- linear-gradient(angle, colorA 0%, colorB stop%)
- radial-gradient(circle at center, colorA 0%, colorB stop%, fallback 100%)
- conic-gradient(from angle, colorA, colorB, colorA)
계산 예시
남색→하늘색 135° 선형 그라디언트는?
- 종류
- linear-gradient
- 시작 색상
- “#0F172A”
- 끝 색상
- “#38BDF8”
- 각도
- 135deg
- 중간 지점
- 100%
결과linear
CSS gradient 함수 문법에 맞춘 배경 코드를 생성했습니다.
보라→분홍 원형 그라디언트는?
- 종류
- radial-gradient
- 시작 색상
- “#7C3AED”
- 끝 색상
- “#EC4899”
- 각도
- 0deg
- 중간 지점
- 100%
결과radial
CSS gradient 함수 문법에 맞춘 배경 코드를 생성했습니다.
CSS Gradient 함수
| 함수 | 기준 | 적합한 사용 |
|---|---|---|
| linear-gradient() | 직선 방향 색상 전환 | 버튼, 카드, 배경 |
| radial-gradient() | 중심점 기준 원형 전환 | 스포트라이트, 글로우 |
| conic-gradient() | 각도 기준 회전 전환 | 차트, 링, 장식 |
주의사항
- 그라디언트 위 글자는 가장 밝은 지점과 가장 어두운 지점 모두에서 명도 대비 4.5:1(WCAG AA)을 넘는지 확인하세요.
그라데이션 CSS는 어떻게 쓰나요?
생성된 linear/radial-gradient 코드를 background 속성에 붙여넣으면 됩니다.
- linear-gradient는 각도와 색상 stop을 사용합니다.
- radial-gradient는 중심점에서 바깥으로 색상이 퍼집니다.
- conic-gradient는 중심을 기준으로 회전하는 색상 전환에 적합합니다.
계산 결과는 입력값과 공개된 기준을 바탕으로 한 참고용 추정치이며, 세무·법률·의료 판단을 대신하지 않습니다. 기준은 2026.09.27 검토 시점입니다. 면책 고지
계산 뒤에 있는 원리