'CSS border top and bottom with linear gradient

I would like to put a gradient border at the top and the bottom of my h2 tags but the border bottom should be the reverse of the top bo.

h2 {
  position: relative;
  text-transform: uppercase;
  font-size: 16px;
  color: blue;
  line-height: 36px;
  letter-spacing: 1.6px;
  margin-right: 80px;
  border-style: solid;
  border-width: 3px;
  border-image: linear-gradient(90deg, orange, rgba(253, 142, 41, 0)) 100% 0 100% 0/3px 0 3px 0 stretch;
}
<div class='bloc-content-lower-upper'>
  <h2>Découvrir la technologie</h2>
  <h2>Test</h2>
</div>

Here i've got a border top and bottom with this gradient, but i want to reverse the color for the bottom one. Thanks a lot for helping.

htmlcss


Solution 1:[1]

Use background:

h2 {
  position: relative;
  text-transform: uppercase;
  font-size: 16px;
  color: blue;
  line-height: 36px;
  letter-spacing: 1.6px;
  padding: 3px 0;
  margin-right:80px;
  background: 
    linear-gradient( 90deg, orange, rgba(253, 142, 41, 0)) top,
    linear-gradient(-90deg, orange, rgba(253, 142, 41, 0)) bottom;
  background-repeat:no-repeat;
  background-size:100% 3px;
 }
<div class='bloc-content-lower-upper'>
  <h2>Découvrir la technologie</h2>
  <h2>Test</h2>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Temani Afif

Related Questions