CSS 그라디언트 생성기
세 HEX 색과 각도·중간 stop 위치로 3색 CSS linear-gradient를 구성합니다.
사용 방법
- 시작·중간·끝 색, angle과 mid stop을 조절한 뒤 CSS를 복사합니다.
핵심 기능과 처리 범위
첫 색 0%, 중간색 사용자 stop%, 마지막색 100%를 한 background 선언으로 만들고 live preview를 제공합니다.
처리 원리
linear-gradient(angledeg, color1 0%, colorMid stop%, color2 100%) 문자열을 생성합니다.
예시
135deg와 50% stop이면 세 색이 대각선 방향으로 연결됩니다.
이럴 때 유용합니다
- hero·card·background용 3색 gradient 초안을 만들 때
사용 전 참고
- color interpolation space와 추가 stop easing을 지정하지 않고 browser 기본 CSS interpolation을 사용합니다.
자주 묻는 질문
radial gradient도 만들 수 있나요?
아닙니다. 현재 action은 linear-gradient 전용입니다.