CSS : Gradient 다양한 색상 적용(그라디언트)

CSS : Gradient 다양한 색상 적용(그라디언트)

 

2개 이상의 색상을 조합한 Gradient 결과 예시

 

 

* Gradient 결과는 포토샵과 일러스트레이터 등을 이용 이미지로 background-image 속성으로 이용할 수도 있지만

 CSS 명령어로 사용할 수도 있습니다.

* CSS를 이용하여 적용하면 편집이 수월하며 이 후 애니메이션 등으로도 활용이 가능합니다.

* background-color 가 아닌 background 통합 속성으로 적용해야 합니다.

* css gradient 기능을 지원하지 않는 브라우저에 대비하여 background-color를 별도로 입력해야합니다.

         (gradient 명령보다 먼저 입력합니다)

 

 

CSS Graident 적용하기 - 기본

* linear-gradient(시작색상, 끝색상);

* Radial-graident(시작색상, 끝색상);

selector {
  background:linear-gradient(blue, red);
}

selector {
  background:radial-gradient(blue, red);
}

selector {
	background:linear-gradient(rgba(0,0,255,0.5), red);
}

 

See the Pen css-gradient-linear-1 by yuna122212 (@yuna122212) on CodePen.

See the Pen css-gradient-radial-2 by yuna122212 (@yuna122212) on CodePen.

 

CSS Gradient 적용하기 - 방향/각도 설정 (linear전용)

* linear-gradient(to 방향, 시작색상, 끝색상)

* to left, to right, to top, to bottom

* to left top 등의 대각선 방향도 가능합니다.

* deg를 활용한 각도 설정 ex) 30deg, 180deg

selector {
	background:linear-gradient(to bottom, blue, red);
}

selector {
	background:linear-gradient(to left top, blue, red);
}

selector {
	background:linear-gradient(180deg, blue, red);
}

 

 

CSS Gradient 적용하기 - 원 비율 설정 (Radial전용)

* circle 설정을 안할 시 radial의 기본 비율 ellipse(위 그림)로 적용 박스 기준으로 원 비율이 깨질 수 있습니다. 이 때 circle 명령을 이용하여 적용 박스 비율 상관없이 보기좋은 정 원 형태의 radial gradient를 볼 수 있습니다.

selector {
	background-image: radial-gradient(circle, red, yellow, green);
}

See the Pen css-gradient-linear-4 by yuna122212 (@yuna122212) on CodePen.

 

 

CSS Gradient 적용하기 - 색상 범위 설정

* 전체 100% 중 원하는 값을 %범위 값으로 색상 뒤로 한칸 띄고 작성합니다.

selector {
	background:linear-gradient(blue, red 80%);
}

selector {
	background:radial-gradient(blue, red 80%);
}

See the Pen css-gradient-linear-3 by yuna122212 (@yuna122212) on CodePen.

 

 

---

 

적용 예시 1) Linear Gradient(선형 그라디언트)

linear 기준 rgba(0 0 0 1) 에서 rgba(255 255 255 1)로 적용된 결과

selector {
	background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
}

See the Pen css-gradient-linear-rgba-deg-5 by yuna122212 (@yuna122212) on CodePen.

 

적용 예시 2) Radial Gradient(원형 그라디언트)

radial 기준 rgba(0 0 0 1) 에서 rgba(255 255 255 1)로 적용된 결과

selector {
	background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
}

See the Pen css-gradient-radial-rgba-deg-6 by yuna122212 (@yuna122212) on CodePen.

 

 

 

 

CSS Gradient 추천 웹 사이트

https://cssgradient.io/

* 직접 Gradient Linear, Radial의 다양한 색상 및 투명도 등을 설정할 수 있습니다.

* 자주 이용하는 웹 Gradient 의 색상을 검색하여 사용할 수 있습니다.

CSS Gradient — Generator, Maker, and Background

 

gradient 색 선정 시 참고

https://uigradients.com/#Atlas

uiGradients - Beautiful colored gradients