Create a Linear Gradient Background of Two Colors in CSS

How to split a background into two colors in CSS:

div {
  height: 200px;
  width: 200px;
  background: linear-gradient(to bottom, #1F4E79 0%, #1F4E79 50%, #ddd 50%, #ddd 100%);
}

Syntax:

background: linear-gradient(, color1 color1-stop-at, color2 color2-start-at);

Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.