css) 인스타그램 이미지 배경색 css로 만들기 gradient 그라데이션 배경색

 

기본인스타그램 이미지에 배경색을 gradient로 스타일을 주는 방법이다.

sns-instagram.svg

0.00MB

 

파일을 받아 배경색을 주면 가로, 세로 34px의 이미지가 나온다. 

최종적으로 저 노란 네모 테두리를 동그랗게 그려 배경색을 입힐 예정이다.

 

인스타그램 배경색1 [ css ]

.footer-rights li a:last-child {
  border-radius: 34px;
  border: 1px solid #000;
  background: linear-gradient(174deg, #285AEB 5.61%, #BC1888 22.32%, #CC2366 36.16%, #DC2743 51.91%, #E6683C 73.38%, #F09433 91.99%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

인스타그램 배경색2 [ css ]

.instar-img {
  background: -webkit-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -webkit-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
  background: -moz-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -moz-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
  background: -ms-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -ms-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
  background: -o-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -o-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
  background: radial-gradient(circle farthest-corner at 32% 106%, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
  border-radius: 50%;
}

 

완성✨

테두리는 border-radius를 수정해서 동그랗게 혹은 사각형으로 그릴수 있다.

 

 

 

border-radius: 5px;

설정시 테두리가 살짝 둥그런 네모가 된다.

 

 

 

css 두가지 모두 동일한 결과를 나타낸다.

 

 

참고

나