I want to add a colour gradient to the Instagram logo without affecting the logo visibility.

HTML

<div class="wrapper">
      <a href=""><i class="fa fa-3x fa-facebook-square"></i></a>
      <a href=""><i class="fa fa-3x fa-twitter-square"></i></a>
      <a href=""><i class="fa fa-3x fa-instagram instagram"></i></a>
</div>

CSS

.wrapper {
  justify-content: center;
  align-items: center;
}
.wrapper i {
  padding: 10px;
  text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
  transition: all ease-in-out 150ms;
}
.wrapper a:nth-child(1) {
  color: #3b5998
}
.wrapper a:nth-child(2) {
  color: #1DA1F2;
}
.wrapper a:nth-child(3) {
  color: black;
}
.wrapper i:hover {
  margin-top: -3px;
  text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
}

I am creating a website where the social media icons are responsive on hover and the logos have an icon.

I want to add a colour gradient to the Instagram logo without affecting the logo visibility.

HTML

<div class="wrapper">
      <a href="http://www.facebook."><i class="fa fa-3x fa-facebook-square"></i></a>
      <a href="http://www.twitter."><i class="fa fa-3x fa-twitter-square"></i></a>
      <a href="http://www.instagram."><i class="fa fa-3x fa-instagram instagram"></i></a>
</div>

CSS

.wrapper {
  justify-content: center;
  align-items: center;
}
.wrapper i {
  padding: 10px;
  text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
  transition: all ease-in-out 150ms;
}
.wrapper a:nth-child(1) {
  color: #3b5998
}
.wrapper a:nth-child(2) {
  color: #1DA1F2;
}
.wrapper a:nth-child(3) {
  color: black;
}
.wrapper i:hover {
  margin-top: -3px;
  text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
}

I am creating a website where the social media icons are responsive on hover and the logos have an icon.

• javascript
• html
• css
• gradient

• 1 Can you try this? stackoverflow./questions/47800574/… – m4n0 Commented Jun 13, 2019 at 5:56

1 Answer 1

Using radial gradient and background-clip

Credits https://stackoverflow./a/49659118/8053274

.wrapper {
  justify-content: center;
  align-items: center;
}

.wrapper i {
  padding: 10px;
  text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
  transition: all ease-in-out 150ms;
}

.wrapper a:nth-child(1) {
  color: #3b5998
}

.wrapper a:nth-child(2) {
  color: #1DA1F2;
}

.wrapper a:nth-child(3) {
  color: black;
}

.wrapper i:hover {
  margin-top: -3px;
  text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
}

.fa-instagram {
  color: transparent;
  background: -webkit-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -o-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
}

<link href="https://stackpath.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="wrapper">
  <a href="http://www.facebook."><i class="fa fa-3x fa-facebook-square"></i></a>
  <a href="http://www.twitter."><i class="fa fa-3x fa-twitter-square"></i></a>
  <a href="http://www.instagram."><i class="fa fa-3x fa-instagram instagram"></i></a>
</div>