How to add multiple linear-gradients to font awesome

Help, I’m building a small project but if i want to make my i element cool with multiple linear-gradients it only applies ones. this is my code:
HTML:

<section id="introduction">
	<h2>Introduction</h2>
	<p id="intro-sub-title">...</p>
	<div id="intro-flex-wrapper">
		<i class="fa-brands fa-html5 fa-8x"></i> <!--I want to add two linear gradients to this elment-->
		<i class="fa-brands fa-css3-alt fa-8x"></i>
		<i class="fa-brands fa-js fa-8x"></i>
	<div>
</section>

CSS:

#introduction{
	background-color: var(--background-color-2);
}
#introduction h2{
	font-size: 3rem;
	text-align: center;
	padding-top: 2rem;
	color: var(--text-color-1);
}
#intro-sub-title{
	text-align: center;
	color: var(--text-color-1);
}
#intro-flex-wrapper{
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.fa-html5{ /*This is the style of the i element*/
  	background-image: 
  		linear-gradient(to right, #e44d26 50%, #f16529 50%),
    	linear-gradient(to bottom, #e44d26 15%, #f16529 15%);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}
.fa-css3-alt{
	color: blue;
	margin: 0 7rem 0 7rem;
}
.fa-js{
	color: yellow;
}

I think you would need the “to bottom” gradient to come first and be transparent from the top to the start of where you want the bottom gradient to begin.

I’m also not really sure how you can tell with the colors you have now. But maybe I just don’t understand the look you are trying to achieve.

An example of what I mean (with different colors).

.fa-html5 {
  background-image: linear-gradient(
      to bottom,
      transparent 75%,
      #2196f3 75%,
      #4caf50 90%
    ),
    linear-gradient(to right, #3f51b5 50%, #009688 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.