Search code examples
htmlcsslinear-gradients

Create a gradient background that looks like two bars

I would like to create a background that appears to have two progress bars as in the picture: enter image description here

I can easily achieve one progress bar with linear-gradient, yet is there any possibility to split the background in half and let both stop at a specific percentage?

<!DOCTYPE html>
<html>
  <head>
  <style> 
      #example1 {
         background-color: transparent;
         background-image: linear-gradient(90deg, #eceddc 25%, transparent 25%),
         linear-gradient(180deg, #eceddc 50%, transparent 25%),
         linear-gradient(90deg, #eceddc 50%, transparent 25%); 
      }
  </style>
</head>
<body>
  <div id="example1">
     <h1>Lorem Ipsum Dolor</h1>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>
</body>
</html>

Solution

  • You can do like below:

    #example1 {
  background: 
      linear-gradient(#eceddc 0 0) top    left,
      linear-gradient(#eceddc 0 0) bottom left;
  background-size:
    80% 30%, /* width height of the first bar  */
    40% 70%; /* width height of the second bar */
  background-repeat:no-repeat;
}
    <div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>