<div class="container">
<div class="linear-gradient">
<p>Linear Gradient</p>
</div>
<div class="radial-gradient">
<p>Radial Gradient</p>
</div>
<div class="conic-gradient">
<p>Conic Gradient</p>
</div>
</div>
.linear-gradient {
background: linear-gradient(to right, #ff0000, #ffff00);
}
.radial-gradient {
background: radial-gradient(circle, #ff0000, #ffff00);
}
.conic-gradient {
background: conic-gradient(#ff0000, #ffff00);
}
.container {
text-align: center;
height: 100%;
width: 100%;
}
This Pen doesn't use any external JavaScript resources.