Search code examples
csssasscolorsmaterial-uigradient

confused with linear gradient


I couldn't remake the gradient with CSS : So here is the objective : enter image description here

More information Gradient color: Start color: #1696B6 with 50% opacity End color: Black with 100% transparency

enter image description here

I already tried. I got this : $gradiant-background-dark-theme: linear-gradient(#1696b6, black, #1696b6); enter image description here I need someone to help me.

.gradient{
  height:200px;
  width:400px;
  background: linear-gradient(#1696b6, black, #1696b6)
}
<div class='gradient'>test</div>


Solution

  • I got the perfect matching

    $gradiant-background-dark-theme: repeating-linear-gradient(to top,rgb(22, 150, 180) 0%,rgb(0, 0, 0,0.5) 10%,rgb(0, 0, 0, 0.5) 90%,rgb(22, 150, 182) 100%)
    

    .container {
    background: black;
    }
    .gradient{
      height:200px;
      width:400px;
      background: repeating-linear-gradient(to top,rgb(22, 150, 180) 0%,rgb(0, 0, 0,0.5) 10%,rgb(0, 0, 0, 0.5) 90%,rgb(22, 150, 182) 100%)
    
    
    }
    <div class='container'><div class='gradient'>test</div></div>