Gradient Blockquote Blog

Gradient blockquote is blockquote that has different gradient background when cursor highlight.

Live demo

Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet.

CSS Code

blockquote {
display: block;
padding: 3px;
line-height:1em;
color: #fff;
font-family:arial;
font-size:12px;
background: linear-gradient(to right, #fc5c7d, #6a82fb);}

blockquote:hover {
-moz-transition: all 1.0s ease-in-out;
-o-transition: all 1.0s ease-in-out;
-ms-transition: all 1.0s ease-in-out;
transition: all 1.0s ease-in-out;
background: linear-gradient(to left, #fc5c7d, #6a82fb);}

Enjoy!