Ex No: 9 GRADIENT USING CSS
Aim: To design a webpage to show different types of gradients using css.
Algorithm
Step1: Create a folder “Ex9” to place the HTML files.
Step2: Create HTML file “index.html”.
Step3: Use CSS gradient options to show various gradients.
CSS Property Description
linear-gradient, radial-gradient, conic-gradient Create different gradient color options
background-color Specify background color
text-align Align text in an element
border Specify border property
border-radius Specify rounded corner radius
width, height Specify width and height value
font-size Specify size of the font
Source Code

index.html


<!DOCTYPE html>
<html>
<head>
  <title>CSS Gradients</title>
  <style>
    header {
      background: linear-gradient(to bottom, #333, #d6dbdf);
      color: #fff;
      text-align: center;
      padding: 20px;
      border-radius: 10px 10px 0px 0px;
    }
    article {
      width: auto;
      border: 2px solid gray;
      padding: 10px;
      border-radius: 10px;
      margin: 5px;
      background: linear-gradient(to top, #d6dbdf, #333, #d6dbdf);
    }
    footer {
      text-align: center;
      font-size: 12px;
      height: 50px;
      line-height: 50px;
			color: white;
      background: linear-gradient(to top, #333, #d6dbdf);
      padding: 20px;
      border-radius: 10px;
    }
    .gradient-box {
      width: 400px;
      height: 200px;
      margin: 20px auto;
      border-radius: 10px;
      text-align: center;
      line-height: 200px;
      font-size: 20px;
      color: #fff;
    }
    .linear-gradient {
      background: linear-gradient(to right, #ff6347, #40e0d0);
    }
    .radial-gradient {
      background: radial-gradient(#01ced1,  #873600);
    }
    .conic-gradient {
      background: conic-gradient(from 45deg, #ffd700, #7cfc00, #ffd700);
    }
  </style>
</head>
<body>
  <header>
    <h1>CSS Gradients</h1>
  </header>
  <article>
    <div class="gradient-box linear-gradient">
      Linear Gradient
    </div>
    <div class="gradient-box radial-gradient">
      Radial Gradient
    </div>
    <div class="gradient-box conic-gradient">
      Conic Gradient
    </div>
  </article>
  <footer>
    Devloped by Dr. D. Natarajasivan
  </footer>
</body>
</html>
Result: Thus a webpage is designed to show different types of gradients using css.