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
CSS Blockquote Examples
1. By Stephen Greig
Made by Stephen Greig. CSS Typography with Blockquote & Pseudo-elements. Source


<!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


<!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


<!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


<!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


<!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


<!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


<!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>—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


<!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


<!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


<!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


<!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


<!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>—Steven Pressfield</h4>
</div>
</div>
</body>
</html>
13. By Vero
Made by Vero. Blockquote with Curve Design. Source


<!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>