CSS 애니메이션 그라데이션 생성기
선형, 방사형, 원뿔형 그라데이션을 만들고 애니메이션을 조정하여 CSS를 내보내세요.
그라디언트 사전 설정
오션 브리즈
따뜻한 일몰
쿨민트
보라색 안개
열대
불
솜사탕
일렉트릭 바이올렛
자정
오로라
복숭아
아쿠아 마린
컬러 정지
CSS 코드
.gradient-background {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}그라데이션 유형
각도: 135°
색상
%
%
애니메이션
그라데이션 팁
🎨 색상 조화
부드러운 전환을 위해서는 색상환에서 인접한 색상을 사용하고, 생생하고 눈길을 끄는 효과를 위해서는 보색을 사용하세요.
⚡ 성과
background-position를 사용하는 애니메이션 그라디언트는 GPU 가속이며 filter 애니메이션보다 성능이 뛰어납니다.
🔧 접근성
그라디언트 위에 배치된 텍스트의 대비가 충분한지 확인하세요. prefers-reduced-motion 미디어 쿼리를 추가해 보세요.