[CSS] 그라데이션 설정하기

css 그라데이션

[CSS] 그라데이션 설정하기

 

그라데이션? 그라디언트?

그라데이션(Gradation)은 하나의 색채에서 다른 색채로 변하는 단계, 혹은 그러한 기법을 의미하는 단어다. 
아래아 한글이나 파워포인트, 포토샵 등을 이용해 제작해 본 사람들은 이 기법을 쉽게 이해할 수 있을 것이다. 순 우리말로는 '바림', 한자어로는 계조(階調)라고 한다. 일본어 잔재 현장 용어로는 보카시라고도 한다. 
외래어 표기법에 의거한 표준어로는 그'러'데이션이라고 한다. 
사진이나 영상 전문가들은 계조라는 표현을 상당히 쓰는 편이다.

서양에서는 'Gradation(그라데이션)'보다 'Gradient(그레이디언트)'라는 표현을 더 많이 쓴다.

 

2021.06.04 - [디자인/색] - [COLOR] 그라데이션 알아보기

[COLOR] 그라데이션 알아보기

 

오늘은 CSS를 이용하여 그라데이션 색상을 적용하는 방법에 대해서 알아볼 예정이다.

 

 

0. 그라디언트 설정하는 방법

background: linear-gradient(#e66465, #9198e5);

background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);

background: linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%);

background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

background: linear-gradient(red 40%, yellow 30%, blue 65%);

 

위의 코드는 MDN에 나오는 색상 들이다.

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient() 

linear-gradient() - CSS: Cascading Style Sheets | MDN

 

하나의 공통적인 것은 linear-gradient()를 이용하여 그라데이션을 준다는 것이다.

 

1. 배경색에 그라데이션 설정

요소{
background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
}

 

요소의 background 속성에  linear-gradient()를 적용하여 색상을 넣어 그라데이션을 적용시킨다.

 

 

2. 글자색에 그라데이션 설정

글자에 색상을 입히는 css는 color이다. 하지만 color에는  linear-gradient()를 적용할 수 없다.

따라서 text-fill-color와  background-clip 이용하여 색을 입혀야 한다.

 

요소{
   background: linear-gradient(to right, #671cc4, #5673bc, #5673bd);
 -webkit-background-clip: text; 
 -webkit-text-fill-color: transparent;
}

※ transparent는 투명하게 만들어 준다. 

 

 

3. 보더(테두리)에 그라데이션 설정

border에도 그라데이션을 설정 할 수 있다. border-image속성을 이용하여 색상을 넣을 수 있다.

요소{
  box-sizing: border-box;
  border: 10px;
  border-style: solid;
  border-image: linear-gradient(#e66465, #9198e5);
  border-image-slice: 1;
}

단, border-radius를 사용하면 적용이 안된다.

 

4. border-radius에 그라데이션 설정

border-radius에 그라데이션을 설정하려면 보더의 색을 투명하게 한 뒤, 배경색에 보더 색을 설정하면 된다.

요소{
  border-radius:50%;
  border: 5px solid transparent;
  background-image: linear-gradient(#8CD1C8, #8CD1C8), linear-gradient(#8ACFC6, #6DB8B6,#58A8AB,#4C9EA4, #489BA2);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

잘 모르겠으면 위의 코드를 그대로 긁어 붙여 넣은 뒤에 적용해보면 된다.

설명을 하자면 background: linear-gradient(컨텐츠 색상),linear-gradient(보더 색상);을 입혀 주면 된다.

 

나머지 코드를 적용한 결과는 아래의 코드팬에서 확인해 보면 된다.

5. 코드팬 결과

 

See the Pen by 윤재현 (@jh91) on CodePen.