[CSS] 그라데이션 배경만들기

이번주에 HTML, CSS, JS를 사용해서 슬라이더를 만들었는데, 슬라이더를 좌우로 움직이면 범위에 따라서 가격이 변경되는 기능이고, 범위에 따른 슬라이더 바의 색상을 채우기 위해 CSS의 linear-gradient() 속성을 처음 사용해 보게 되었다.

 

linear-gradient를 사용하면 두 가지 이상의 색상을 사용해서 점진적으로 전환하여 그라데이션 이미지를 만들 수 있게 해 준다. 색상이 시작되는 방향, 색상이 차지하는 비율, 색상이 나아가는 방향(각도)을 정할 수 있고 어떻게 정하냐에 따라 멋진 그라데이션 효과를 줄 수 있다. 

 

내가 만든 슬라이더는 두 가지 색상의 구분만 필요하여 각 색상을 퍼센트로 구분해 주었다. 그럴 때는 다음과 같이 비율을 절반씩만 채워서 초기 상태로 만들고, 슬라이더를 움직일 때마다 자바스크립트로 비율을 변경하여 적용해 줌으로써 구현할 수 있었다.

 

background: linear-gradient(
  to right,
  hsl(174, 77%, 80%) 0% 50%,
  hsl(224, 65%, 95%) 50% 100%
);

 

 

linear-gradient의 사용목적이 그라데이션을 만들 수 있는 것인데 단순하게만 사용해서 아쉽다는 생각이 들어 밤하늘🌌 느낌의 그라데이션 배경을 한번 만들어보기로 했다. 

점차 변하는 그라데이션 배경

background에 그라데이션 배경을 적용하고, background에 position을 움직이는 애니메이션 효과를 적용하면 배경색이 점진적으로 변하는 것 같은 효과를 얻을 수 있다. 이때 배경 사이즈를 '확대'해서 그라데이션의 일부 색상이 전체 배경색을 차지하게 만들어야 제대로 적용할 수 있다.

body {
  background: linear-gradient(-45deg, #080a1c, #181230, #352039, #574b65);
  background-size: 400% 400%;
  animation: gradient 10s ease infinite;
  height: 100vh;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

어두운 밤하늘에 별🌠이 떨어지게 하고 싶어서 별들에 애니메이션 효과를 적용했다. 왼쪽 상단에서 오른쪽 하단(↘︎)으로 별이 떨어지는 애니메이션과 살짝 좌우로 이동하며 떨어지는 애니메이션을 만들고, 세부적으로 각 별들마다 위치와 animation-delay를 다르게 적용해서 순차적으로 떨어지는 모습을 만들었다.

/* 각 별들 */
.starflake {
  position: fixed;
  top: -10%;
  animation-name: starflakes-fall, starflakes-shake;
  animation-duration: 10s, 5s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running;
}

.starflake:nth-of-type(0) {
  left: 10%;
  animation-delay: 0s, 2s;
}
.starflake:nth-of-type(1) {
  left: 20%;
  animation-delay: 1s, 1s;
}
...

이쯤 되니 밤하늘보다는 우주 안에 떠다니는 별의 모습이 더 어울리는 것 같다는 생각에 svg파일로 큰 별⭐️과 혜성☄️ 지구🌎를 추가해 주니 조금 더 그럴듯하다.

 

 

마지막으로 별과 혜성에게 drop-shadow라는 그림자 효과를 적용해서 스스로 빛나게 만들었다.

.meteor {
  width: 4rem;
  height: 4rem;
  filter: drop-shadow(0 0 0.75rem #fbeaff);
}

.medium_star {
  width: 2.5rem;
  height: 2.5rem;
  filter: drop-shadow(0 0 0.75rem #fffade);
}

완성!!

배경을 만들어 보면서 linear-gradient 속성뿐만 아니라 @keyframes, 애니메이션 등 여러 가지 CSS 속성을 다뤄볼 수 있었고, 여러 가지 색상을 조합해 보고 적용하면서 만들어가는 재미를 느끼는 과정이었다.

 

---

참고

https://alvarotrigo.com/blog/animated-backgrounds-css/