Gradients

by Bilal Shakeel

HTML

<h1>Some different types of gradients</h1>

<div>
<div class="grad">
    basic:<br />
    linear-gradient(to right, red 0%, yellow 100%);
</div>
<div class="grad">
    pixel stops:<br />
    linear-gradient(to right, red 10px, orange 20px, yellow 40px, green 80px);
</div>
<div class="grad">
    two stops on top of (or behind) each other<br />
    linear-gradient(to right, red 40%, green 10%, yellow);
</div>
<div class="grad">
    pixel and percentages combined<br />
    linear-gradient(to right, red 10px, orange 50%, yellow 250px, green);
</div>
<div class="grad">
    mixed units<br />
    linear-gradient( to right, red 10px, yellow 5em, green 100%);
</div>
</div>

CSS

.grad {
    width: 80%;
    height: 40px;
    margin: 10px auto;
    padding: 10px;
    color: black;
    text-shadow: 0 0 3px white;
}

.grad:nth-child(1) {
    background: linear-gradient(to right, red 0%, yellow 100%);
}
.grad:nth-child(2) {
    /* pixel based stops */
    background: linear-gradient(to right, red 10px, orange 20px, yellow 40px, green 80px);
}
.grad:nth-child(3) {
    /* two stops on top of (or behind) each other */
    background: linear-gradient(to right, red 40%, green 10%, yellow);
}
.grad:nth-child(4) {
     /* pixel and percentages combined */
    background: linear-gradient(to right, red 10px, orange 50%, yellow 250px, green);
}

.grad:nth-child(5) {
    background: linear-gradient( to right, red 10px, yellow 5em, green 100%);
}