Share the post "12+ CSS Blockquote Examples"

Share the post "12+ CSS Blockquote Examples"

Share the post "12+ CSS Blockquote Examples"

Share the post "12+ CSS Blockquote Examples"

12+ CSS Blockquote Examples

💙 CSS / By

This post contains a total of 12+ CSS Blockquote Examples with Source Code. All these Blockquote Examples are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

5+ Bootstrap Blockquote Examples
Bootstrap Blockquotes

CSS Blockquote Examples

1. By Stephen Greig

Made by Stephen Greig. CSS Typography with Blockquote & Pseudo-elements. Source

CSS Blockquote by Stephen Greig
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@font-face {
    font-family: 'Sketch Block';
    src: url('http://tangledindesign.com/codepen/fonts/sketch_block-webfont.eot');
    src: url('http://tangledindesign.com/codepen/fonts/sketch_block-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://tangledindesign.com/codepen/fonts/sketch_block-webfont.woff') format('woff'),
         url('http://tangledindesign.com/codepen/fonts/sketch_block-webfont.ttf') format('truetype'),
         url('http://tangledindesign.com/codepen/fonts/sketch_block-webfont.svg#SketchBlockBold') format('svg');
}

@font-face {
    font-family: 'Museo 700';
    src: url('http://tangledindesign.com/codepen/fonts/Museo700-Regular-webfont.eot');
    src: url('http://tangledindesign.com/codepen/fonts/Museo700-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://tangledindesign.com/codepen/fonts/Museo700-Regular-webfont.woff') format('woff'),
         url('http://tangledindesign.com/codepen/fonts/Museo700-Regular-webfont.ttf') format('truetype'),
         url('http://tangledindesign.com/codepen/fonts/Museo700-Regular-webfont.svg#SketchBlockBold') format('svg');
}

@font-face {
    font-family: 'CallunaRegular';
    src: url('http://tangledindesign.com/codepen/fonts/Calluna-Regular-webfont.eot');
    src: url('http://tangledindesign.com/codepen/fonts/Calluna-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://tangledindesign.com/codepen/fonts/Calluna-Regular-webfont.woff') format('woff'),
         url('http://tangledindesign.com/codepen/fonts/Calluna-Regular-webfont.ttf') format('truetype'),
         url('http://tangledindesign.com/codepen/fonts/Calluna-Regular-webfont.svg#CallunaRegular') format('svg');
}

body {
	background: #333;
	color: #fff;
}

	.container {
		width: 590px;
		margin: 140px auto;
		position: relative;
	}

	blockquote {
		width: 565px;
		font: 2.65em CallunaRegular;
		letter-spacing: .075em;
		float: left;
		padding: 45px 0 30px 25px;
		margin: 0;
		border-top: 2px dotted #858585;
		border-bottom: 2px dotted #858585;
		-webkit-transform: rotate(-3deg);
		-moz-transform: rotate(-3deg);
	}

	.container:before {
		content: "“";
		font-size: 13em;
		position: absolute;
		left: -100px;
		color: #666;
	}

	.container:after {
		content: "”";
		font-size: 13em;
		position: absolute;
		right: -100px;
		top: 150px;
		color: #666;
	}

		blockquote:first-line {
			font: 1.85em "Sketch Block";
			color: #fff79e;
		}

		blockquote:first-letter {
			font-size: 2.9em;
			text-transform: lowercase;
			float: left;
			line-height: .52em;
			margin-right: -18px;
			position: relative;
			z-index: 1;
		}

		blockquote strong:first-child {
			margin-left: 8px;
			letter-spacing: 0;
		}

		blockquote strong:last-child {
			font: 2em "Museo 700";
			text-transform: uppercase;
			letter-spacing: 0;
		}

		blockquote em {
			border-bottom: 2px dotted #858585;
		}

		blockquote + b {
			float: right;
			margin-top: 10px;
			font: 1.6em CallunaRegular;
			letter-spacing: .15em;
		}

		blockquote + b:first-letter {
			color: #fff79e;
			font-size: 1.3em;
			font-style: italic;
			letter-spacing: .25em;
		}

		@-moz-document url-prefix() { 

			blockquote:first-letter {
				margin-top: -29px;
			}

		}
</style>
</head>
<body>
  <article class="container">

		<blockquote>
			<strong>Imagination</strong> is <em>more important</em> than <strong>knowledge</strong>
		</blockquote>
		<b>Einstein, A.</b>
	</article>
</body>
</html>

2. By Dudley Storey

Made by Dudley Storey. Responsive Pullquote With Generated Quote Marks. Source

CSS Blockquote by Dudley Storey
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Questrial);
body { 
  margin: 3rem;
  font-family: Georgia, serif;
  font-size: 1.4rem;
line-height: 1.5;
}
.pullquote {
  padding: 2.6rem 2.2rem 2rem 3.6rem;
  width: 20rem;
  position: relative;
  margin: 0 2rem 2rem 0;
  float: left;
  font-family: Questrial, Helvetica, sans-serif;
  font-size: 1.8rem;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  color: #FFF;
  text-transform: uppercase;
  background: #2F2F2F;
  border: 1px solid #eee;
  box-shadow: 0 0 5px #2F2F2F
}
.pullquote br { display: none; }
.pullquote:before, .pullquote:after { 
  content: "“";
  font-family: Georgia;
  font-size: 400%;
  position: absolute;
  color: yellow;
  text-shadow: 0 0 5px rgba(0,0,0,0.4);
}
.pullquote:before { 
  top: .25rem;
  left: .5rem;
}
.pullquote:after { 
  content: "”";
  bottom: -3rem;
  right: 3rem;
}
@media screen and (max-width: 700px)
  { 
.pullquote { 
  float: none;
  width: 80%;
margin: 0 auto;
}
.pullquote br { display: block; }
  }
@media screen and (max-width: 550px) { 
.pullquote br { display: none; }
}
@media screen and (max-width: 480px) { 
.pullquote:before, .pullquote:after { font-size: 200%; }
.pullquote { 
  font-size: 1.4rem;
  padding: 1.6rem 1.2rem 1rem 2rem;
}
.pullquote:after { bottom: 0; }
}
</style>
</head>
<body>
  <p>Atqui clita prompta eum an, an mundi nusquam sit. Movet consequat sit eu, ne pri equidem pericula principes, in vim etiam audiam. Qui ne munere mandamus expetenda. Saperet gloriatur vel ea, an sit quas aliquam lobortis. Lorem referrentur definitionem id mel, mel augue luptatum complectitur at. Erant suavitate vel ut.
<blockquote class="pullquote">
  The concept of generated content can be slippery to grasp, primarily because it may be considered outside the central purpose of <br>CSS.
</blockquote>

<p>At ius nobis omittantur, ei sed homero efficiantur contentiones, per harum discere et. Sonet molestie te nec, reque homero tamquam id vix, erat volumus ea eam. Et sumo reprehendunt eum, eam in latine eripuit, essent habemus et nam. Vim sumo case ea. Probo elitr ceteros at qui. An sit natum epicurei, vis mucius utroque splendide at, dicta bonorum persecuti eam ad. Et mea eruditi indoctum iudicabit, cu vero omittam concludaturque pro, alienum invidunt tacimates ex usu.
</p>
</body>
</html>

3. By Jonathan Clift

Made by Jonathan Clift. Clean and simple blockquote style. Source

CSS Blockquote by Jonathan Clift
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic);
blockquote{
  font-size: 1.4em;
  width:60%;
  margin:50px auto;
  font-family:Open Sans;
  font-style:italic;
  color: #555555;
  padding:1.2em 30px 1.2em 75px;
  border-left:8px solid #78C0A8 ;
  line-height:1.6;
  position: relative;
  background:#EDEDED;
}

blockquote::before{
  font-family:Arial;
  content: "\201C";
  color:#78C0A8;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

blockquote::after{
  content: '';
}

blockquote span{
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}
</style>
</head>
<body>
  <blockquote>
  Creativity is just connecting things.
  <span>Steve Jobs</span>
</blockquote>
</body>
</html>

4. By Lukas Dietrich

Made by Lukas Dietrich. Damn simple blockquote. Source

CSS Blockquote by Lukas Dietrich
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/bitter/v28/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8fbfOLjOWA.ttf) format('truetype');
}
* {
  box-sizing: border-box;
}
html {
  text-align: center;
  padding-top: 50px;
  background: url(https://dl.dropbox.com/s/mz2pjouq8xqw45k/wood_1.png?dl=1);
}
blockquote {
  position: relative;
  display: inline-block;
  background: #eee;
  padding: 40px 30px 30px 60px;
  border-radius: 10px;
  font-family: 'Bitter', serif;
  color: #333;
  text-align: left;
  box-shadow: 1px 1px 1px #999, 2px 2px 1px #999, 3px 3px 1px #999;
  transition-duration: 0.3s;
}
blockquote span.author {
  position: relative;
  display: block;
  text-align: right;
  margin-top: 5px;
  color: #999;
}
blockquote span.author i {
  position: relative;
  background: #eee;
  padding-left: 5px;
  font-style: italic;
  z-index: 5;
}
blockquote span.author::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
  z-index: 1;
}
blockquote:hover {
  box-shadow: 1px 1px 5px #999, 2px 2px 6px #999, 3px 3px 7px #999;
}
blockquote::before {
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  content: "\"";
  font-family: 'Bitter', serif;
  font-size: 120px;
  color: #999;
}
</style>
</head>
<body>
  <blockquote>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br /> sed diam nonumy eirmod tempor invidunt ut
  <span class="author"><i>Lorem ipsum</i></span>
</blockquote>
</body>
</html>

5. By Kerry

Made by Kerry. Circular Blockquote Design using CSS. Source

CSS Blockquote by Kerry
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Titillium+Web:400,400i,700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css");

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: "Titillium Web", sans-serif;
  font-size: 20px;
  line-height: 1.4;
  color: #161b1e;
}

.quote-wrapper {
  width: 300px;
  height: 300px;
  position: relative;
  margin: 10vh auto 0; /*OPTIONAL MARGIN*/
}

.text {
  width: 100%;
  height: 100%;
  /*BLUE BG*/
  background: radial-gradient(
    ellipse at center,
    rgba(0, 128, 172, 1) 0%,
    rgba(0, 128, 172, 1) 70%,
    rgba(0, 128, 172, 0) 70.3%
  );
  /*RED BG
  background: radial-gradient(
    ellipse at center,
    rgba(210, 20, 20, 1) 0%,
    rgba(210, 20, 20, 1) 70%,
    rgba(210, 20, 20, 0) 70.3%
  );*/
  position: relative;
  margin: 0;
  color: white;
}

.text p {
  height: 100%;
  font-size: 21px;
  line-height: 1.25;
  padding: 0;
  text-align: center;
  font-style: italic;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

.text::before {
  content: "";
  width: 50%;
  height: 100%;
  float: left;
  shape-outside: polygon(
    0 0,
    98% 0,
    50% 6%,
    23.4% 17.3%,
    6% 32.6%,
    0 50%,
    6% 65.6%,
    23.4% 82.7%,
    50% 94%,
    98% 100%,
    0 100%
  );
  shape-margin: 7%;
}

.text p::before {
  content: "";
  width: 50%;
  height: 100%;
  float: right;
  shape-outside: polygon(
    2% 0%,
    100% 0%,
    100% 100%,
    2% 100%,
    50% 94%,
    76.6% 82.7%,
    94% 65.6%,
    100% 50%,
    94% 32.6%,
    76.6% 17.3%,
    50% 6%
  );
  shape-margin: 7%;
}

.quote-wrapper blockquote footer {
  width: 100%;
  position: absolute;
  bottom: 25px;
  font-size: 17px;
  text-align: center;
  font-style: italic;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

.quote-wrapper::before {
  content: "\201C";
  font-size: 270px;
  height: 82px;
  line-height: 0.78;
  line-height: 1;
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 1;
  font-family: sans-serif, serif;
  color: #ccc;
  opacity: 0.9;
}

@media (min-width: 850px) {
  .quote-wrapper {
    width: 370px;
    height: 370px;
  }

  .quote-wrapper::before {
    font-size: 300px;
  }

  .text p {
    font-size: 26px;
  }

  .quote-wrapper blockquote footer {
    bottom: 32px;
  }
}

/*THIS CSS IS NOT REQUIRED FOR CIRCULAR TEXT*/
/*THIS CSS IS NOT REQUIRED FOR CIRCULAR TEXT*/

.note {
  margin: 5vw;
  padding: 0.5em;
  border-left: 0.5em solid #52e052;
  background: #e9fbe9;
}

.note a {
  text-decoration: none;
  color: #161b1e;
}

.note a:hover {
  text-decoration: underline;
}
</style>
</head>
<body>
  <div class="quote-wrapper">
  <blockquote class="text" cite="#">
    <p>Experience design is the design of anything, independent of medium.</p>
    <footer>– Jesse James Garrett</footer>
  </blockquote>
</div>
</body>
</html>

6. By Joe Hastings

Made by Joe Hastings. Simple Quote Styling. Source

CSS Blockquote by Joe Hastings
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/specialelite/v18/XLYgIZbkc4JPUL5CVArUVL0ntnAOTQ.ttf) format('truetype');
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  font-family: 'Special Elite', cursive;
  background: #fffdf5;
  color: #3f3f5a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
blockquote {
  font-weight: 100;
  font-size: 2rem;
  max-width: 600px;
  line-height: 1.4;
  position: relative;
  margin: 0;
  padding: 0.5rem;
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #f1efe6;
  font-size: 8rem;
  width: 4rem;
  height: 4rem;
}
blockquote:before {
  content: '“';
  left: -5rem;
  top: -2rem;
}
blockquote:after {
  content: '”';
  right: -5rem;
  bottom: 1rem;
}
cite {
  line-height: 3;
  text-align: left;
}
</style>
</head>
<body>
  <blockquote>The man who comes back through the door in the wall will never be quite the same as the man who went out.</blockquote>
<cite>Aldous Huxley</cite>
</body>
</html>

7. By Juan Pablo

Made by Juan Pablo. Modern Looking Blockquote design. Source

CSS Blockquote by Juan Pablo
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Barlow+Condensed:400,400i,700,700i" rel="stylesheet">
<style>
body { 
  background-color: #292a2b;
 }

/* center the blockquote in the page */
.blockquote-wrapper {
   display: flex;
   height: 100vh;
   padding: 0 20px;
}

/* Blockquote main style */
.blockquote {
    position: relative;
    font-family: 'Barlow Condensed', sans-serif;
    max-width: 620px;
    margin: 80px auto;
    align-self: center;
}

/* Blockquote header */
.blockquote h1 {
    font-family: 'Abril Fatface', cursive;
    position: relative; /* for pseudos */
    color: #e74848;
    font-size: 2.8rem;
    font-weight: normal;
    line-height: 1;
    margin: 0;
    border: 2px solid #fff;
    border: solid 2px;
    border-radius:20px;
    padding: 25px;
}

/* Blockquote right double quotes */
.blockquote h1:after {
    content:"";
    position: absolute;
    border: 2px solid #e74848;
    border-radius: 0 50px 0 0;
    width: 60px;
    height: 60px;
    bottom: -62px;
    left: 50px;
    border-bottom: none;
    border-left: none;
    z-index: 3; 
}

.blockquote h1:before {
    content:"";
    position: absolute;
    width: 80px;
    border: 6px solid #292a2b;
    bottom: -3px;
    left: 50px;
    z-index: 2;
}

/* increase header size after 600px */
@media all and (min-width: 600px) {
    .blockquote h1 {
        font-size: 3rem;
        line-height: 1.2;
   }

}

/* Blockquote subheader */
.blockquote h4 {
    position: relative;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    padding-top: 15px;
    z-index: 1;
    margin-left:150px;
    padding-left:12px;
}

 
.blockquote h4:first-letter {
  margin-left:-12px;
}
</style>
</head>
<body>
  <div class="blockquote-wrapper">
  <div class="blockquote">
    <h1>
     Intuitive design happens when <span style="color:#ffffff">current knowledge</span> is the same as the <span style="color:#ffffff">target knowledge.</span>
     </h1>
    <h4>&mdash;Jared Spool<br><em>Web Site Usability: A Designer's Guide</em></h4>
  </div>
</div>
</body>
</html>

8. By Mark Sottek

Made by Mark Sottek. Simple, Pretty Blockquote. Source

CSS Blockquote by Mark Sottek
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected];1&display=swap');


.classy-bq {

  border-left:1px solid #ccc;
  margin: 1.5em 10px;
  padding: .7em 25px;
  quotes: "\201C""\201D""\2018""\2019";
  color:white;
}
.classy-bq:before {
  color: white;
  content: open-quote;
  font-size: 8em;
  line-height: .1em;
  margin-right: .25em;
  vertical-align: -.4em;
  opacity:0.60;
}
blockquote p {
  display: inline;
  font-size: 1.5rem;
  line-height:1.5;
}
.blockquote-section {width:100%;max-width:1200px;margin:0 auto;opacity:0.95;padding:20px;}
.blockquote-section > cite {font-style:none}
.cite {color:white;padding-left:20px;font-size:1.25rem;}

body {background:#212121;padding-top:50px;

font-family: 'Montserrat', sans-serif;
}
</style>
</head>
<body>
  <section class="blockquote-section">
                <blockquote class="classy-bq"><p>A
partial list of Walker’s credits could make
P.T.</p>

  
</blockquote>
<span class="cite">"Mr. Show Biz Lights Up the Sky for Billions.” Patrick
Mott. <em>Los Angeles Times</em>. 1985</span>
</section>
</body>
</html>

9. By Tigran Sargsyan

Made by Tigran Sargsyan. Blockquote Styling with Box-Shadow. Source

CSS Blockquote by Tigran Sargsyan
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Vollkorn:ital,[email protected],600;1,500&display=swap');

:root {
	--type-body: Open Sans, Helvetica, Arial, sans-serif;
	--type-quote: Vollkorn;
	--quote-image-width: 140px;
	--border-rad: 7px;
	--accent-color: hsl(322deg 85% 65%);
	--quote-bg: hsl(0 0% 97%);
}


*,
*::before,
*::after {
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color: var(--accent-color);
}

a:hover,
a:focus {
	text-decoration: underline;
}

body {
	margin: 15px 10px;
	font-family: var(--type-body);
	color: hsl(0 0% 15%);
}

.article {
	max-width: 900px;
	margin: auto;
}

h1 {
	width: max-content;
	margin: 0 auto 1.8em;
	box-shadow:
		0 2px 0 var(--accent-color),
		0 4px 0 white,
		0 6px 0 var(--accent-color);
	font: 1.4rem var(--type-quote);
	color: hsl(0 0% 25%);
}


blockquote {
	position: relative;
	margin: 40px 0;
	padding: 1.6em 2.4em .7em calc(1.4em + var(--quote-image-width));
	font: italic 1.2rem var(--type-quote);
	background: var(--quote-bg) no-repeat left / var(--quote-image-width);
	border-radius: var(--border-rad);
	border: 2px solid white;
	box-shadow: 2px 2px 4px hsl(0 0% 0% / 20%);
	text-indent: 1.6em;
}

@media (min-width: 768px) {
	blockquote {
		margin: 40px 60px;
	}
}

blockquote::before {
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	border-radius: var(--border-rad);
	box-shadow:
		inset -2px -2px 1px hsl(0 0% 100%),
		inset 2px 2px 4px hsl(0 0% 0% / 20%);
}

blockquote::after {
	content: "❝";
	position: absolute;
	z-index: 1;
	left: 50%;
	top: -2px;
	transform: translate(-50%, -50%);
	width: 1.3em;
	height: 1.3em;
	background: white;
	box-shadow: 0 4px 5px -1px hsla(0 0% 0% / 20%);
	border-radius: 999px;
	display: grid;
	place-content: center;
	padding-top: .5em;
	color: var(--accent-color);
	font-size: 36px;
	font-style: normal;
	text-indent: 0;
}

.blockquote-author-image {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--quote-image-width);
	height: 100%;
	opacity: 0.75;
	background: var(--accent-color) var(--image) no-repeat center / cover;
	background-blend-mode: hard-light;
	border-top-left-radius: var(--border-rad);
	border-bottom-left-radius: var(--border-rad);
}

cite {
	display: block;
	margin-top: 30px;
	text-indent: 0;
	text-align: center;
	font: bold .9rem var(--type-body);
	text-transform: uppercase;
	color: hsl(0 0% 20%);
}

@media (min-width: 768px) {
	cite {
		margin-left: calc(1rem - var(--quote-image-width));
	}
}

.cite-last-name {
	background: var(--accent-color);
	color: var(--quote-bg);
}
</style>
</head>
<body>
  <article class="article">
	<h1>Love Thy Neighbor (on This Planet)</h1>
	<p>Throughout history thinkers and artists.</p>
	
	<blockquote>
		<p>I have from an early age.</p>
		<cite>Leonardo<span class="cite-last-name">da Vinci</span></cite>
		<div class="blockquote-author-image" style="--image: url('data:image/jpeg;base64,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')"></div>
	</blockquote>
	<p>We do not like to think.</p>
</article>
</body>
</html>

10. By Chris Smith

Made by Chris Smith. Multiple Blockquote Styles. Source

CSS Blockquote by Chris Smith
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@charset "UTF-8";
.quote {
  display: inline-block;
  margin: 1em;
  overflow: hidden;
}
.quote blockquote {
  background-color: #fff;
  border: solid 2px #757575;
  display: inline-block;
  margin: 0;
  padding: 1em;
  position: relative;
}
.quote blockquote:before {
  background-color: #fff;
  bottom: -10%;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: -10%;
  transform: rotate(-15deg) skew(5deg);
}
.quote blockquote cite {
  display: block;
  font-style: italic;
  text-align: right;
}
.quote blockquote cite:before {
  content: "- ";
}
.quote blockquote > * {
  position: relative;
  z-index: 1;
}

.animated-border-quote {
  display: inline-block;
  margin: 1em;
  max-width: 20em;
  overflow: hidden;
}
.animated-border-quote blockquote {
  background-color: #fff;
  border: solid 2px #757575;
  display: inline-block;
  margin: 0;
  padding: 1em;
  position: relative;
}
.animated-border-quote blockquote:before {
  animation: clockwise 30s infinite linear;
  background-color: #fff;
  bottom: 10%;
  content: "";
  left: 0;
  opacity: 0.5;
  position: absolute;
  right: 0;
  top: 10%;
}
.animated-border-quote blockquote:after {
  animation: counter 30s infinite linear;
  background-color: #fff;
  bottom: 10%;
  content: "";
  left: 0;
  opacity: 0.5;
  position: absolute;
  right: 0;
  top: 10%;
}
.animated-border-quote blockquote cite {
  display: block;
  font-style: italic;
  text-align: right;
}
.animated-border-quote blockquote cite:before {
  content: "- ";
}
.animated-border-quote blockquote > * {
  position: relative;
  z-index: 1;
}

@keyframes clockwise {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes counter {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.animated-shadow-quote {
  display: inline-block;
  margin: 1em;
  max-width: 20em;
  position: relative;
}
.animated-shadow-quote blockquote {
  animation: shadows 2s linear infinite alternate;
  display: inline-block;
  margin: 0;
  padding: 1em;
}
.animated-shadow-quote blockquote cite {
  display: block;
  font-style: italic;
  text-align: right;
}
.animated-shadow-quote blockquote cite:before {
  content: "- ";
}

@keyframes shadows {
  0% {
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.25);
    transform: scale(0.95);
  }
  100% {
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25);
    transform: scale(1);
  }
}
.square-brackets-quote {
  display: inline-block;
  font-family: sans-serif;
  margin: 1em;
  max-width: 20em;
}
.square-brackets-quote blockquote {
  border: solid 1em #ccc;
  display: inline-block;
  margin: 0;
  padding: 1em;
  position: relative;
}
.square-brackets-quote blockquote:before {
  background-color: #fff;
  bottom: -1em;
  content: "";
  left: 2em;
  position: absolute;
  right: 2em;
  top: -1em;
}
.square-brackets-quote blockquote cite {
  color: #757575;
  display: block;
  font-size: small;
  font-style: normal;
  text-align: right;
  text-transform: uppercase;
}
.square-brackets-quote blockquote > * {
  position: relative;
  z-index: 1;
}

.giant-quotes-quote {
  display: inline-block;
  font-family: sans-serif;
  margin: 1em;
  max-width: 20em;
}
.giant-quotes-quote blockquote {
  display: inline-block;
  margin: 0;
  padding: 1em;
  position: relative;
}
.giant-quotes-quote blockquote:before {
  color: #f90;
  content: "“";
  font-size: 4em;
  left: 0;
  line-height: 0.75em;
  position: absolute;
  top: 0;
  transform: scale(2, 8);
  transform-origin: top;
}
.giant-quotes-quote blockquote:after {
  color: #f90;
  content: "”";
  font-size: 4em;
  line-height: 0.75em;
  position: absolute;
  right: 0;
  top: 0;
  transform: scale(2, 8);
  transform-origin: top;
}
.giant-quotes-quote blockquote > * {
  padding: 0 2em;
}
.giant-quotes-quote blockquote cite {
  color: #c60;
  display: block;
  font-style: normal;
  text-align: right;
  text-transform: uppercase;
}
</style>
</head>
<body>
  <div class="quote">
  <blockquote>
    <p>Ever tried. Ever failed. No matter.<br>Try again. Fail again. Fail better.</p>
    <cite>Samuel Beckett</cite>
  </blockquote>
</div>

<div class="animated-border-quote">
  <blockquote>
    <p>The world always seems brighter when you’ve just made something that wasn’t there before.</p>
    <cite>Neil Gaiman</cite>
  </blockquote>
</div>

<div class="animated-shadow-quote">
  <blockquote>
    <p>I am always doing that which I can not do, in order that I may learn how to do it.</p>
    <cite>Pablo Picasso</cite>
  </blockquote>
</div>

<div class="square-brackets-quote">
  <blockquote>
    <p>True knowledge exists in knowing that you know nothing.</p>
    <cite>Socrates</cite>
  </blockquote>
</div>

<div class="giant-quotes-quote">
  <blockquote>
    <p>It’s not bragging if you can back it up.</p>
    <cite>Muhammad Ali</cite>
  </blockquote>
</div>
</body>
</html>

11. By Thibaut

Made by Thibaut. Notepaper Blockquote. Source

CSS Blockquote by Thibaut
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
  font: 12px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #dce1e1;
}

.notepaper {
  position: relative;
  margin: 30px auto;
  padding: 29px 20px 20px 45px;
  width: 280px;
  line-height: 30px;
  color: #6a5f49;
  text-shadow: 0 1px 1px white;
  background-color: #f2f6c1;
  background-image: -webkit-radial-gradient(center, cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 90%), -webkit-repeating-linear-gradient(top, transparent 0%, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
  background-image: -moz-radial-gradient(center, cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 90%), -moz-repeating-linear-gradient(top, transparent 0%, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
  background-image: -o-radial-gradient(center, cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 90%), -o-repeating-linear-gradient(top, transparent 0%, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
  border: 1px solid #c3baaa;
  border-color: rgba(195, 186, 170, 0.9);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 5px #d8e071, 0 0 1px rgba(0, 0, 0, 0.1), 0 2px rgba(0, 0, 0, 0.02);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 5px #d8e071, 0 0 1px rgba(0, 0, 0, 0.1), 0 2px rgba(0, 0, 0, 0.02);
}

.notepaper:before, .notepaper:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
}

.notepaper:before {
  left: 28px;
  width: 2px;
  border: solid #efcfad;
  border-color: rgba(239, 207, 173, 0.9);
  border-width: 0 1px;
}

.notepaper:after {
  z-index: -1;
  left: 0;
  right: 0;
  background: rgba(242, 246, 193, 0.9);
  border: 1px solid rgba(170, 157, 134, 0.7);
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}

.quote {
  font-family: Georgia, serif;
  font-size: 14px;
}

.curly-quotes:before, .curly-quotes:after {
  display: inline-block;
  vertical-align: top;
  height: 30px;
  line-height: 48px;
  font-size: 50px;
  opacity: .2;
}

.curly-quotes:before {
  content: '\201C';
  margin-right: 4px;
  margin-left: -8px;
}

.curly-quotes:after {
  content: '\201D';
  margin-left: 4px;
  margin-right: -8px;
}

.quote-by {
  display: block;
  padding-right: 10px;
  text-align: right;
  font-size: 13px;
  font-style: italic;
  color: #84775c;
}

.lt-ie8 .notepaper {
  padding: 15px 25px;
}
</style>
</head>
<body>
  <div class="notepaper">
  <figure class="quote">
    <blockquote class="curly-quotes" cite="#">
      The same wind blows on us all.
      The difference in arrival is not
      the blowing of the wind,
      but the set of the sail.
    </blockquote>
    <figcaption class="quote-by">— Jim Rohn</figcaption>
  </figure>
</div>
</body>
</html>

12. By Juan Pablo

Another CSS Blockquote Design by Juan Pablo. Source

CSS Blockquote by Juan Pablo
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,800,800i" rel="stylesheet"> 
<style>
body { 
  background-color: #52ACFF;
  background-image: linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);
 }


/* center the blockquote in the page */
.blockquote-wrapper {
   display: flex;
   height: 100vh;
   padding: 0 20px;
}

/* Blockquote main style */
.blockquote {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #ffffff;
    padding: 30px 0;
    width: 100%;
    max-width: 500px;
    z-index: 1;
    margin: 80px auto;
    align-self: center;
    border-top: solid 1px;
    border-bottom: solid 1px;
}

/* Blockquote header */
.blockquote h1 {
    position: relative;
    color: #FFFFFF;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    margin: 0;
}

/* Blockquote right double quotes */
.blockquote:after {
    position: absolute;
    content: "”";
    color: rgba(255, 255, 255, 1);
    font-size: 10rem;
    line-height: 0;
    bottom: -43px;
    right: 30px;
}

/* increase header size after 600px */
@media all and (min-width: 600px) {
    .blockquote h1 {
        font-size: 60px;
   }

}

/* Blockquote subheader */
.blockquote h4 {
    position: relative;
    color: #292a2b;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1;
    margin: 0;
    padding-top: 20px;
    z-index: 1;
}
</style>
</head>
<body>
  <div class="blockquote-wrapper">
  <div class="blockquote">
    <h1>
      Start before you are ready
     </h1>
    <h4>&mdash;Steven Pressfield</h4>
  </div>
</div>
</body>
</html>

13. By Vero

Made by Vero. Blockquote with Curve Design. Source

CSS Blockquote by Vero
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  background : repeat rgba(235, 150, 108, 0.1); 
} 

.main {
  position : relative; 
} 


.mb-wrap {
  margin : 20px auto; 
  padding : 20px; 
  position : relative; 
  width : 300px; 
} 

.mb-wrap p {
  margin : 0; 
  padding : 0; 
}

.mb-wrap blockquote {
  margin : 0; 
  padding : 0; 
  position : relative; 
} 

.mb-wrap cite {
  font-style : normal; 
} 

.mb-style-2 blockquote {
  padding-top : 150px; 
} 

.mb-style-2 blockquote:after {
    background: none repeat scroll 0 0 rgba(235, 150, 108, 0.8);
    border-radius: 50% 50% 50% 50%;
    color: rgba(255, 255, 255, 0.5);
    content: "❞";
    font-family: 'icons';
    font-size: 70px;
    height: 130px;
    left: 50%;
    line-height: 130px;
    margin-left: -65px;
    position: absolute;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
    top: 0;
    width: 130px;
}
.mb-style-2 blockquote:before {
    border-left: 5px solid rgba(235, 150, 108, 0.1);
    border-radius: 50% 50% 50% 50%;
    content: "";
    height: 500px;
    left: -50px;
    position: absolute;
    top: 0;
    width: 500px;
    z-index: -1;
}

.mb-style-2 blockquote p {
  background : none repeat scroll 0 0 rgba(255, 255, 255, 0.5); 
  box-shadow : 0 -6px 0 rgba(235, 150, 108, 0.2); 
  color : rgba(235, 150, 108, 0.8); 
  display : inline; 
  font-family : Baskerville, Georgia, serif; 
  font-style : italic; 
  font-size : 28px; 
  line-height : 46px; 
  text-shadow : 0 1px 1px rgba(255, 255, 255, 0.5);  
} 

.mb-attribution {
  text-align : right; 
} 

 .mb-author {
  color : #D48158; 
  font-size : 18px; 
  font-weight : bold; 
  padding-top : 10px; 
  text-shadow : 0 1px 1px rgba(255, 255, 255, 0.1); 
  text-transform : uppercase; 
}  

cite a {
  color : #D7AA94; 
  font-style : italic; 
} 

cite a:hover {
  color : #D48158; 
}
</style>
</head>
<body>
	  <section class="main">  
      <div class="mb-wrap mb-style-2">  
        <blockquote cite="#">  
          <p>  If you don't know where are you going, any road will get you there</p>
        </blockquote>
      </div><!--#mb-wrap-->
      
      <div class="mb-attribution"> 
        <p class="mb-author">  
          Lewis Carroll
        </p>
        <cite>  
          <a href="#">Alice's Adventures in Wonderland</a>
        </cite>
      </div><!-- #mb-attribution-->
  </section>
</body>
</html>