.gradiant{
height: 250px;
background-color: #ff8a00;
background-image: linear-gradient(#ff8a00, #e52e71);
}
Linear gradients HTML
<div class="gradient"></div>
Linear gradients View
Radial gradients Css
.rgradiant{
height: 250px;
background-color: #ff8a00;
background-image: radial-gradient(#ff8a00, #e52e71);
}
Radial gradients HTML
<div class="rgradient"></div>
Radial gradients View
Conic gradients Css
.coingradient {
height: 250px;
background-color: #ff8a00;
background-image: conic-gradient(#ff8a00, #e52e71);
}
Conic gradients HTML
<div class=”coingradient”></div>
Conic gradients view
Repeating gradients Css
.repeating-gradient {
height: 250px;
background-color: #ff8a00;
background-image: repeating-linear-gradient(
45deg,
#ff8a00,
#ff8a00 10px,
#e52e71 10px,
#e52e71 20px /* determines size */
);
}
Repeating gradients HTML
<div class="repeating-gradient"></div>
Repeating gradients view