CSS로 그라데이션 배경 만드는 방법 – 웹 코딩 강좌

해당 강좌는 유튜브 멤버십 회원 전용 강좌입니다.

바로 구독하기

웹 디자이너를 위한 웹 코딩 강좌 시간입니다. 이번 시간에는 CSS를 사용해서 그라데이션 넣는 방법을 알아볼게요. linear-gradient, radial-gradient, conic-gradient, repeating-radial-gradient 등 다양하게 사용할 수 있습니다. 해당 그라데이션을 사용할 때 컬러 방향이나 2개 이상의 컬러 넣는 방법, 해당 컬러의 힌트 중심을 바꾸는 방법에 대해서도 배워볼게요.

예제 다운은 멤버십 회원 커뮤니티에 올린 링크에서 받으실 수 있습니다.

*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.

핵심 요약

CSS로 그라데이션을 만드는 방법은 간단합니다. 총 5가지 형식으로 선형 그레이디언트, 원형 그레이디언트, 반복 선형 그레이디언트, 반복 원형 그레이디언트, 원뿔형 그레이디언트 이렇게 제공합니다.

background: linear-gradient(#f69d3c, #3f87a6);
background: radial-gradient(#f69d3c, #3f87a6);
background: repeating-linear-gradient(#f69d3c, #3f87a6 50px);
background: repeating-radial-gradient(#f69d3c, #3f87a6 50px);
background: conic-gradient(#f69d3c, #3f87a6);

색상을 여러가지로 넣고 싶다면, 콤마를 통해 넣을 수 있습니다. 그리고 그라데이션의 방향을 조절할 수도 있습니다. ‘to top : 아래서 위로 그라데이션 적용 , to left top : 우측 하단에서 좌측 상단으로 그라데이션 적용’ 이렇게 입니다.

.linear-gradient {
  background: linear-gradient(to right,
      red, orange, yellow, green, blue, indigo, violet);
}

컬러에 위치를 조절하고 싶다면 컬러값 뒤에 %로 표현할 수 있습니다.

.gradient-bg {
  background: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
}