계산 로직과 결과 카드가 연결된 상태입니다.
개발계산 가능
그래디언트 생성기
linear, radial, conic CSS 그래디언트 코드를 생성합니다.
결과 대기 중
이 계산기를 이렇게 설계했습니다.
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)
CSS Gradient 함수
| 함수 | 기준 | 적합한 사용 |
|---|---|---|
| linear-gradient() | 직선 방향 색상 전환 | 버튼, 카드, 배경 |
| radial-gradient() | 중심점 기준 원형 전환 | 스포트라이트, 글로우 |
| conic-gradient() | 각도 기준 회전 전환 | 차트, 링, 장식 |
계산식에 사용된 방법
- 종류, 시작 색상 등 값을 입력 형식에 맞게 확인한 뒤 계산합니다.
- 형식과 입력 규칙을 검증한 뒤 개발 도구 목적에 맞는 생성 또는 변환을 적용합니다.
- 결과는 검산과 복사에 바로 쓰기 쉬운 형태로 보여주는 방식을 사용합니다.
주의사항
- 텍스트, 시간, 코드 입력은 예시 형식과 다르면 계산이 제한되거나 결과가 달라질 수 있습니다.
- 선택한 옵션에 따라 적용 기준과 결과 해석이 달라질 수 있습니다.
- 소수점 자리수와 반올림 방식에 따라 화면에 보이는 값이 조금 달라질 수 있습니다.
그라데이션 CSS는 어떻게 쓰나요?
생성된 linear/radial-gradient 코드를 background 속성에 붙여넣으면 됩니다.
- linear-gradient는 각도와 색상 stop을 사용합니다.
- radial-gradient는 중심점에서 바깥으로 색상이 퍼집니다.
- conic-gradient는 중심을 기준으로 회전하는 색상 전환에 적합합니다.