css기초-그라디언트 속성

전은하·2024년 6월 13일

CSS기초

목록 보기
9/28

``

gradient

배경 색상이나 글자에 그라데이션을 넣을 수 있다.
배경에 적용할 경우 background-image속성을 이용하며
글자에 적용할 경우 color에 적용한다.

1.linear-gradient(각도 to 방향, 색상중단점1 시작위치% , 색상중단점2 시작위치%...)

[방향 종류]
-to top : 아래에서 부터 위로 그라데이션을 적용함.
-to left : 오른쪽에서 시작해 왼쪽으로 적용함.
-to right : 왼쪽에서 시작해 오른쪽으로 적용함.
-to bottom : 위에서 부터 아래로 그라데이션을 적용함.
background-image: linear-gradient(to top, #667eea 0%, #925fc2 50%, #764ba2 100%);

2.radial-gradient(최종모양 크기 at 위치,색상중단점1 시작위치% 색상중단점2 시작위치% ...)
[최종 모양]
-ellipse : 타원
-circle : 정원
[크기]
-closet-side : 정원의 경우 그라디언트 가장 자리가 그라디언트 중심에서 가장 가까운 요소의
모서리와 만나고, 타원의 경우 그라디언트 중심에서 가장 가까운 요소의 수평축이나
수직축이랑 만남.

profile
안녕하세요

0개의 댓글