Try It Yourself: CSS Gradients

HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS Gradients</title>
  <meta charset="UTF-8">
</head>
<body>

<h1>CSS Gradients</h1>

<h2>Top to Bottom Gradient</h2>
<div class="top-bottom">TOP TO BOTTOM GRADIENT</div>
<style>
.top-bottom{
  padding: 40px;
  text-align: center;
  background: linear-gradient(#066,#d7d7d7);
}  
</style>

<h2>Left to right Gradient</h2>

<div class="left-right">LEFT TO RIGHT GRADIENT</div>

<style>
.left-right{
  padding: 40px;
  text-align: center;
  background: linear-gradient(to right,#f7f7f7,#999);
}  
</style>

<h2>Diagonal Gradient</h2>
<div class="bottom-right">DIAGONAL GRADIENT</div>

<style>
.bottom-right{
  padding: 40px;
  text-align: center;
  background: linear-gradient(to bottom right,#f7f7f7,#999);
}  
</style>

<h2>Multiple Color Stops</h2>
<div class="multiple">MULTIPLE COLOR STOPS GRADIENT</div>

<style>
.multiple{
  padding: 40px;
  text-align: center;
  background: linear-gradient(to right,#ff0000,#fff000,#00ff00);
}  
</style>

<h2>Transparent Gradient</h2>
<div class="transparent">TRANSPARENT GRADIENT</div>

<style>
.transparent{
  padding: 40px;
  text-align: center;
  background: linear-gradient(rgba(0,102,102,0.3),rgba(215,215,215,1));
}  
</style>

<h2>Radial Gradient</h2>
<div class="radial"></div>

<style>
.radial{
  height: 200px;
  width: 200px;  
  background: radial-gradient(#ff0000,#fff000,#00ff00);
}  
</style>

</body>
</html>

CSS Code

/* Write your CSS here */

CSS Gradients - Playground