90°
그라디언트 생성기
색상을 고르고 옵션을 조정해 브라우저에서 바로 CSS 그라디언트를 만드세요.
사용 방법
- 최소 두 가지 색상을 선택하세요.
- 선형 또는 원형 그라디언트 유형을 선택하세요.
- 선형을 선택했다면 각도를 조정하세요.
- 생성된 CSS를 복사해 프로젝트에 붙여넣으세요.
실시간 미리보기
생성된 CSS
background: linear-gradient(90deg, #4f46e5, #06b6d4);
빠른 프리셋
의도를 가진 그라디언트 사용
이 도구로 CSS 그라디언트를 빠르게 만들고, 배포 전 가독성을 짧게 점검하세요.
이 도구가 유용한 경우
- 히어로/카드/CTA 배경을 빠르게 정해야 할 때.
- 선형과 원형 중 어느 쪽이 맞는지 비교할 때.
- 구현에 바로 붙일 CSS 코드가 필요할 때.
빠른 사용 순서
- 먼저 두 가지 색상을 고릅니다.
- 선형/원형을 선택하고 필요하면 각도를 조정합니다.
- 실제 텍스트 가독성을 떠올리며 미리봅니다.
- CSS를 복사해 실제 레이아웃에서 테스트합니다.
자주 하는 실수
- 채도가 높은 색을 너무 많이 섞는 것.
- 페이지 거의 모든 영역에 그라디언트를 쓰는 것.
- 배경 전체 구간에서 텍스트 가독성을 확인하지 않는 것.