TIL 002 CSS_linear-gradient

aliceinkorea·2021년 2월 8일
0

TIL

목록 보기
2/23
post-thumbnail

🎯 안써본 background 효과 익히기


linear-gradient()는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성하게 하는 함수다.



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

기본적으로 위에서 아래로 색상 그레이디언트


background: linear-gradient(45deg, blue, red);

왼쪽으로 45도로 기울어진 파랑 시작 빨강 종료 그레이디언트


background: linear-gradient(45deg, blue 0 50%, red 50% 100%);

다중 위치 색상 정지점:
왼쪽으로 45도 기울어진 좌하단 절반 파랑, 우상단 빨강 절반에 두 색이 만나는 지점을 정확히 나누는 그레이디언


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

좌상단 방향으로 파랑 시작 빨강 종료 그레이디언트


  background: linear-gradient(red 10%, 40%, blue 90%);

시작점에서 10% 지점까지 완전한 빨강이고, 90% 지점까지는 빨강에서 파랑으로 서서히 전환하며, 마지막 10%는 완전한 파랑입니다. 그러나 빨강과 파랑 사이 전환의 중간 지점은 50%가 아닌 34% 지점


 background: linear-gradient(135deg, orange 60%, cyan);

135도 기울어진 축의 60% 지점에서 시작하는 그레이디언트


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

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(0deg, blue, green 40%, red);

색상 정지점:
아래에서 위로,파랑에서 시작해 길이의 40%에서 초록으로, 빨강 종료 그레이디언트


 background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);

다중 위치 색상 정지점을 가진 그레이디언트

profile
If you don't build your dream, someone will hire you to help build theirs.

1개의 댓글

comment-user-thumbnail
2021년 3월 10일

헐!! 저는 개인적으로 이거 너무 좋아해요! 구글에 나와있는 팔레트 조합으로 예쁜 색들이 금방 나오더라구요! 이미 알고 계실 수 있지만 https://colorhunt.co/에 예쁜 팔레트들 많이 있어요 :)

답글 달기