JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<figure class="gradient-horizontal-multi">
    <img src="http://genelocklin.com/examples/gradient-borders/temp/1.jpeg" alt="Placeholder" />
</figure>

<figure class="gradient-vertical-multi">
    <img src="http://genelocklin.com/examples/gradient-borders/temp/99.jpeg" alt="Placeholder" />
</figure>

<figure class="gradient-diagonal-multi">
    <img src="http://genelocklin.com/examples/gradient-borders/temp/11.jpeg" alt="Placeholder" />
</figure>

<figure class="gradient-dual">
    <img src="http://genelocklin.com/examples/gradient-borders/temp/17.jpeg" alt="Placeholder" />
</figure>

<figure class="gradient-vertical">
    <img src="http://genelocklin.com/examples/gradient-borders/temp/19.jpeg" alt="Placeholder" />
</figure>

<figure class="gradient-horizontal">
    <img src="http://genelocklin.com/examples/gradient-borders/temp/71.jpeg" alt="Placeholder" />
</figure>

CSS

*{margin:0;padding:0;}
body{max-width:480px;width:90%;margin:2em auto;background:#fafaf3;}

img{
    margin: 1em auto;
    max-width:100%;
    padding: 1%;
    height:auto;
}

/*- Gradient Border Code ----------*/
.gradient-dual img { 
background: #000000;
background: -moz-linear-gradient(left, #000000 0%, #000000 1%, #ff0084 1%, #ff0084 50%, #000000 50%, #000000 99%, #ff0084 99%, #ff0084 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(1%,#000000), color-stop(1%,#ff0084), color-stop(50%,#ff0084), color-stop(50%,#000000), color-stop(99%,#000000), color-stop(99%,#ff0084), color-stop(100%,#ff0084));
background: -webkit-linear-gradient(left, #000000 0%,#000000 1%,#ff0084 1%,#ff0084 50%,#000000 50%,#000000 99%,#ff0084 99%,#ff0084 100%);
background: -o-linear-gradient(left, #000000 0%,#000000 1%,#ff0084 1%,#ff0084 50%,#000000 50%,#000000 99%,#ff0084 99%,#ff0084 100%);
background: -ms-linear-gradient(left, #000000 0%,#000000 1%,#ff0084 1%,#ff0084 50%,#000000 50%,#000000 99%,#ff0084 99%,#ff0084 100%);
background: linear-gradient(left, #000000 0%,#000000 1%,#ff0084 1%,#ff0084 50%,#000000 50%,#000000 99%,#ff0084 99%,#ff0084 100%);
}

.gradient-vertical img { 
    background: -moz-linear-gradient(top, #5b3838 0%, #d43f3f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5b3838), color-stop(100%,#d43f3f));
    background: -webkit-linear-gradient(top, #5b3838 0%,#d43f3f 100%);
    background: -o-linear-gradient(top, #5b3838 0%,#d43f3f 100%);
    background: -ms-linear-gradient(top, #5b3838 0%,#d43f3f 100%);
    background: linear-gradient(top, #5b3838 0%,#d43f3f 100%);
}

.gradient-horizontal img { 
    background: -moz-linear-gradient(left, #454d37 0%, #97c84b 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#454d37), color-stop(100%,#97c84b));
    background: -webkit-linear-gradient(left, #454d37 0%,#97c84b 100%);
    background: -o-linear-gradient(left,...

JavaScript

// gradient borders by @genelocklin

// based on http://bit.ly/v3FeDL