CloseTag | الشروحات | CSS | تدرج الألوان في لغة CSS | CSS Color Gradients

<!DOCTYPE html>
<html>
<head>
<style>
div
{
  text-align:center;
  margin-top:20px;
}
.grad-0
{
  height: 100px;
  background-color: red;
  background-image: linear-gradient(0deg, lime, cyan);
}

.grad-90
{
  height: 100px;
  background-color: red;
  background-image: linear-gradient(90deg, lime, cyan);
}

.grad-180
{
  height: 100px;
  background-color: red; 
  background-image: linear-gradient(180deg, lime, cyan);
}

.grad-90-
{
  height: 100px;
  background-color: red;
  background-image: linear-gradient(-90deg, lime, cyan);
}
</style>
</head>
<body>

<h1>CSS linear gradients angles</h1>
<p>CSS gradients are represented by the gradient data type</p>

<div class="grad-0">0deg</div>
<div class="grad-90">90deg</div>
<div class="grad-180">180deg</div>
<div class="grad-90-">-90deg</div>

</body>
</html>