Gradient - Responsive

owl 
			
	.gradient {
	  max-width: 100%;
	  position: relative;
	}
	
	.gradient img {
	  max-width: 100%;
	  height: auto;
	  border-top: 2px solid #d8d8d8;
	  border-bottom: 2px solid #0e0e0e;
	}
	
	.gradient:after,
	.gradient:before {
	  content: "";
	  height: 97%;
	  left: 0px;
	  position: absolute;
	  top: 0;
	  width: 2px;
	  z-index: 4;  
	  background: linear-gradient(top, #d8d8d8 0%,#0e0e0e 100%);
	}
	
	.gradient:before {
	  left: auto;
	  right: 0px;
	}
	
	.gradient:after {
	  left: 0px;
	  right: auto;
	}

Faux Gradient - Fixed

owl 
			
	.faux-gradient-fixed {
	  width: 480px;
	}
	
	.faux-gradient-fixed img {
	  width: 480px;
	  padding: 2px;
	}
	.faux-gradient-fixed img { 
	  background: linear-gradient(top, #d8d8d8 0%,#0e0e0e 100%);
	}

Faux Gradient - Responsive

owl 
			
	.faux-gradient-responsive {
	  max-width: 100%;
	}
	
	.faux-gradient-responsive img {
	  max-width: 100%;
	  height: auto;
	  width: 100%;
	  padding: .5%;
	}
	
	.faux-gradient-responsive img { 
	  background: linear-gradient(top, #d8d8d8 0%,#0e0e0e 100%);
	}

Faux Gradient - Responsive Two

owl 
			
	.faux-gradient-responsive-two { 
		position: relative;
		width: 99%;
		margin: 0 auto;
		z-index: 10;
		display: block;
	}
	
	.faux-gradient-responsive-two img { 
		max-width: 100%;
		height: auto;
	}
	
	.faux-gradient-responsive-two:before { 
		content: "";
		position: absolute;
		width: 101%;
		left: -.5%;
		top: -1%;
		height: 99%;
	  background: linear-gradient(top, #d8d8d8 0%,#0e0e0e 100%);
		z-index: -10;
	}

About this post

Here are three and a half techniques for adding gradient borders to elements. I’ve used images for the example, but the techniques can be used on anything.

The first example, .gradient, can be attributed to on by . The effect is achieved by adding two pseudo elements to either side and solid borders on top and bottom. it’s probably the least flexible of the techniques.

The second and third examples, .faux-gradient-fixed and .faux-gradient-responsive are achieved by generating a gradient background for and then adding padding to an element.

The final example, .faux-gradient-responsive-two is achieved by adding a pseudo element background with a negative z-index to an element.

I have no idea if these have been recreated anywhere else. The innovators. For the most part, though, it seems to be a situation around here.