css:
<style>
.vertical-linear-gradient {
background-color: #42b4e6; /* fallback for older browsers */
background-image: linear-gradient(to top, #42b4e6, #ffffaa);
}
.horizontal-linear-gradient {
background-color: #42b4e6; /* fallback for older browsers */
background-image: linear-gradient(to left, #42b4e6, #ffffaa);
}
.angle-linear-gradient {
background-color: #42b4e6; /* fallback for older browsers */
background-image: linear-gradient(45deg, #42b4e6, #ffffaa);
}
.rainbow-linear-gradient {
background-color: #42b4e6; /* fallback for older browsers */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
.multiple-linear-gradient {
background-color: #42b4e6; /* fallback for older browsers */
background-image: linear-gradient(120deg, rgba(0,255,255,0.5) 30%, rgba(255,127,255,0.5) 50%, rgba(127,127,255,0.5) 70%, rgba(255,255,255,0) 87%), linear-gradient(45deg, rgba(255,0,255,0.5) 40%, rgba(255,127,127,0.5) 40%, rgba(127,255,127,0.5) 60%, rgba(255,255,0,0.5) 60%);
}
.example {
margin: 20px;
padding: 20px;
max-width: 200px;
}
</style>
html:
<div class="vertical-linear-gradient example">
Vertical linear gradient example
</div>
<div class="horizontal-linear-gradient example">
Horizontal linear gradient example
</div>
<div class="angle-linear-gradient example">
Angle linear gradient example
</div>
<div class="rainbow-linear-gradient example">
A rainbow made from a gradient
</div>
<div class="multiple-linear-gradient example">
Multiple linear gradient example
</div>