CSS 그라데이션 생성기 — 아름다운 그라데이션 만들기

그라데이션은 플랫 디자인에 깊이와 생동감을 더해줍니다. CSS 그라데이션 생성기로 완벽한 그라데이션을 쉽게 만들고 바로 사용하세요.

CSS 그라데이션 유형

• linear-gradient: 직선 방향으로 색상 전환
• radial-gradient: 중심에서 바깥쪽으로 색상 전환
• conic-gradient: 중심점을 기준으로 회전하며 색상 전환

기본 문법

background: linear-gradient(방향, 색상1, 색상2);
background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
background: radial-gradient(circle, #FF6B6B, #4ECDC4);

트렌디한 그라데이션 조합

• 선셋: #FF6B6B → #FFA07A
• 오션: #0099CC → #00D4FF
• 포레스트: #56AB2F → #A8E063
• 퍼플 드림: #667EEA → #764BA2

성능 팁

그라데이션은 이미지보다 훨씬 가볍습니다. 배경 이미지 대신 CSS 그라데이션을 사용하면 페이지 로딩 속도가 빨라집니다.