Blockquote with Gradient

by Peter Doyle

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<br/><br/>
<div class="col-sm-12">
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum malesuada neque non dui vulputate, nec lacinia sapien volutpat. Vivamus pharetra tortor eu lorem convallis, ut commodo massa laoreet. Nunc et nibh erat. Phasellus nisi mi, condimentum eget vestibulum sed, interdum eu ex. Proin ac nulla a neque vehicula cursus.Proin ac nulla a neque vehicula cursus.Proin ac nulla a neque vehicula cursus. 
<div class="small">this is the quoted person</div>
</blockquote> 
</div>

CSS

blockquote{
  border: none;
  position:relative;
}

blockquote:after{
  content:"";
  position:absolute;
  width:4px;
  height:100%;
  left:0;
  top:0;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4ddb4+0,558e00+14,e50031+60,e50031+60,f7a400+100 */
background: #b4ddb4; /* Old browsers */
background: -moz-linear-gradient(top,  #b4ddb4 0%, #558e00 14%, #e50031 60%, #e50031 60%, #f7a400 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #b4ddb4 0%,#558e00 14%,#e50031 60%,#e50031 60%,#f7a400 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #b4ddb4 0%,#558e00 14%,#e50031 60%,#e50031 60%,#f7a400 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#f7a400',GradientType=0 ); /* IE6-9 */

}