Generate rectangular with gradient CSS-CodePudding

How can generate rectangular using gradient in CSS?

CodePudding user response：

you can try this code to make rectangle by making a div and class as rectangle,

.rectangle {
    width: 400px;
    height: 200px;
    background: linear-gradient(to left bottom, rgb(84, 255, 84), #329600, rgb(124, 124, 124));
  }

you can change the direction of color also.

CodePudding user response：

I guess that what you are looking for is a linear gradient. I recomand you to try this web site : https://cssgradient.io/ to easly visualize the render of the css property

background: linear-gradient

I tried to reproduce what was on your exemple and I get this css code

.exemple{
  width:200px;
  height: 150px;

background: rgb(40,83,62);
background: -moz-linear-gradient(150deg, rgba(40,83,62,1) 5%, rgba(156,200,151,1) 80%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(150deg, rgba(40,83,62,1) 5%, rgba(156,200,151,1) 80%, rgba(255,255,255,1) 100%);
background: linear-gradient(150deg, rgba(40,83,62,1) 5%, rgba(156,200,151,1) 80%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#28533e",endColorstr="#ffffff",GradientType=1);
}

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<body>
  <div ></div>
</body>
</html>

Hope this helps !!