css linear gradient

by Владимир Коротенко

HTML

<!-- 
see more on https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients
-->
<ul id="banner-message">
  <li>1 Menu item</li>
  <li>2 Menu item</li>
  <li>3 Menu item</li>
  <li>4 Menu item</li>
  <li>5 Menu item</li>
</ul>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;  

}
ul{
  list-style: none;
}
li{
  text-align: left;
  padding: 1em;
  color: rgb(25, 89, 134);
  background: linear-gradient(175deg, rgba(25, 89, 134, 0.6), rgba(25, 89, 134, 0) 28%);
            
  /* 
  border-width: 3px;
  border-style: solid;
  border-image: 
    linear-gradient(
      to bottom,
      blue, 
      rgba(0, 0, 0, 0)
    ) 1 30%;  */
}