Home  »  CodeSnippets   »   Create a Linear Gradient Background of Two Colors in CSS

Create a Linear Gradient Background of Two Colors in CSS

Posted: February 7, 2022 | by Site Host

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.

Share it!

See also  How to Invert Columns Using CSS and Flex