CSS로 배경에 그라데이션 주는 방법 (with 예제 코드)

웹사이트를 디자인할 때 배경에 단색이 아닌 그라데이션 효과를 주면 시각적으로 훨씬 세련된 느낌을 줄 수 있어요.
CSS에서는 linear-gradient, radial-gradient 등을 이용해서 간단하게 그라데이션을 적용할 수 있습니다.

이번 포스팅에서는 CSS에서 배경 그라데이션을 설정하는 기본적인 방법과 다양한 예제를 함께 알아볼게요!

---

📌 1. 선형 그라데이션 (Linear Gradient)

linear-gradient는 위에서 아래, 혹은 왼쪽에서 오른쪽 등 직선 방향으로 색이 변하는 효과입니다.

✅ 기본 문법:

background: linear-gradient(방향, 색1, 색2, ...);

✅ 예제:

<div class="linear-bg">Hello, Gradient!</div>

<style>
.linear-bg {
  width: 100%;
  height: 200px;
  color: white;
  text-align: center;
  line-height: 200px;
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* 왼쪽에서 오른쪽 */
}
</style>

---

📌 2. 방사형 그라데이션 (Radial Gradient)

radial-gradient는 중심에서 바깥 방향으로 색이 퍼져나가는 형태입니다.

✅ 예제:

<div class="radial-bg">Radial Gradient</div>

<style>
.radial-bg {
  width: 100%;
  height: 200px;
  color: white;
  text-align: center;
  line-height: 200px;
  background: radial-gradient(circle, #43cea2, #185a9d); /* 원형 그라데이션 */
}
</style>

---

📌 3. 그라데이션에 투명도 추가하기

RGBA 색상이나 투명한 색상을 넣으면 자연스러운 페이드 효과도 만들 수 있어요.

<div class="transparent-bg">With Transparency</div>

<style>
.transparent-bg {
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0.7), rgba(255, 255, 255, 0));
  text-align: center;
  line-height: 200px;
  color: #333;
}
</style>

---

📌 4. 반복 그라데이션 (Stripes 등)

repeating-linear-gradient를 이용하면 스트라이프 같은 배경도 만들 수 있습니다.

<div class="stripe-bg">Repeating Gradient</div>

<style>
.stripe-bg {
  width: 100%;
  height: 200px;
  background: repeating-linear-gradient(
    45deg,
    #f06,
    #f06 10px,
    #fff 10px,
    #fff 20px
  );
  text-align: center;
  line-height: 200px;
  color: #000;
}
</style>

---

💡 팁: 그라데이션과 함께 사용하는 경우

• 버튼, 카드 등 UI 컴포넌트의 배경에 활용
• 섹션 구분 시 배경 전환 효과로 사용
• 텍스트 위 배경 또는 오버레이에도 활용 가능

---

CSS로 그라데이션을 주는 것은 생각보다 간단하면서도 디자인에 큰 변화를 줄 수 있는 요소입니다.
위의 예제들을 참고해서 나만의 감성 배경을 만들어보세요!