<div> 태그로 만든 박스의 배경을 한가지의 단색이 아닌,
두가지의 색을 이용해서 그라데이션 효과를 주는 방법을 알아봅시다.
background: linear-gradient( )
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
CSS에 background: linear-gradient( )를 넣어서 그라데이션 효과를 줄 수 있습니다.
처음에 넣어준 값인 90deg는 각도를 뜻합니다.
90 대신에 0, 45, 180, 225, 270 등등.. 다양한 값을 넣을 수 있습니다.
gradation
위의 소스 코드로 이와 같은 그라데이션 효과가 적용이 된 박스가 만들어졌습니다.
background: radial-gradient( )
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
한쪽 방향으로 흘러가는 그라데이션이 아닌, 가운데에서부터 퍼지는 그라데이션도 가능합니다.
background: radial-gradient( )를 넣어서 괄호 안에 원하는 색 두가지를 넣어주면 됩니다.
gradation
위의 소스 코드로 이와 같은 그라데이션 효과가 적용이 된 박스가 만들어졌습니다.
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 박스에 그림자 넣기 (0) | 2021.02.17 |
|---|---|
| CSS 박스의 모서리를 둥글게 라운딩 처리하는 방법 (0) | 2021.02.14 |
| CSS, 같은 페이지의 특정 위치로 링크시에 컬러 변화 (0) | 2021.02.10 |
| CSS 리스트 태그의 번호 디자인 변경 (0) | 2021.02.08 |
| CSS 폰텔로 fontello 사용법 (0) | 2021.01.17 |
댓글