title: How to add a color gradient to the instagram logo without affecting the visibility?
body: <p>I want to add a colour gradient to the Instagram logo without affecting the logo visibility.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
        &lt;a href="http://www.facebook.com"&gt;&lt;i class="fa fa-3x fa-facebook-square"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href="http://www.twitter.com"&gt;&lt;i class="fa fa-3x fa-twitter-square"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href="http://www.instagram.com"&gt;&lt;i class="fa fa-3x fa-instagram instagram"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.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);
  }
  </code></pre>
  
  <p>I am creating a website where the social media icons are responsive on hover and the logos have an icon.</p>