linear와 radial, 언제 무엇을
색상 2~3개와 각도(linear) 또는 형태(radial)를 고르면 그대로 복사할 수 있는 background CSS가 나옵니다.
- linear-gradient: 한 방향으로 색이 흐릅니다. 버튼·헤더·배경 띠에 두루 쓰입니다.
90deg는 위→아래,0deg는 아래→위,135deg는 대각선입니다. - radial-gradient: 중심에서 바깥으로 퍼집니다. 스포트라이트 느낌이나 둥근 카드 배경에 어울립니다.
색 두 개 vs 세 개
색을 둘만 쓰면 깔끔하고 무난합니다. 세 번째 색을 더하면 중간(50%)에 색이 끼어 더 풍부해지지만, 대비가 큰 색을 섞으면 띠 경계가 도드라질 수 있습니다.
자주 겪는 문제
- 각도 혼동: CSS 각도는 시계 방향이고
0deg가 위쪽입니다. 디자인 툴과 기준이 달라 헷갈리기 쉽습니다. - 텍스트 가독성: 그라데이션 위에 글자를 올리면 한쪽 끝에서 대비가 무너집니다. 어두운 반투명 오버레이를 한 겹 깔면 안전합니다.
기준 색을 고를 때는 컬러 팔레트, 그림자는 box-shadow 생성기와 함께 쓰면 편합니다.