CSS Gradient Editor

Creating a multi-colored border using CSS linear gradient

HTML

<div class='bordered'>Border on all sides</div>

CSS

.bordered {
    border: 15px solid;
    border-image-source: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon 60%, maroon 80%, chocolate 80%);
    border-image-slice: 1;
}

The above example would produce a border that comprises 5 different colors. These colors are defined through a linear-gradient.

Result

Creating a custom list style with CSS gradient

HTML

<ul>
    <li>Test I</li>
    <li>Test II</li>
    <li>Test III</li>
</ul>

CSS

ul {
    list-style-type: none;
}

li:before {
    content: "";
    display: inline-block;
    margin-right: 10px;
    height: 10px;
    width: 10px;
    background: linear-gradient(red, blue);
}

First remove the default list style. Then add gradient boxes for bullets.

Result

• Test I
• Test II
• Test III