10 Stylish Blockquote Designs: Copy-and-Paste CSS

This post was automatically translated by AI from the Japanese original. The screenshots are in Japanese.

When you write a post, don’t you often want to quote a passage from someone else’s website or blog?

In this post I’ve prepared CSS samples you can copy and paste.

I’ll also show you how to change the blockquote design on your blog or in WordPress.

It’s all plain HTML and CSS, so please feel free to use it.

Point: make quotes look like quotes#

When you quote text on the web, copyright rules expect you to set it apart from your own writing, so readers can tell at a glance “this is a quotation.”

Look for the quote button (the ” mark) in your blog editor.

In the WordPress block editor, this is the quote button.

Adding a quote in the block editor (in Japanese)

[HTML] How to write blockquote and cite#

Use the <blockquote> tag.
Text wrapped in <blockquote> tells both readers and search engines that it is a quotation or a reproduction.

1
<blockquote cite="URL of the source">
2
    <p>The quoted text</p>
3
    <cite>Source: <a href="URL of the source">Title of the source article</a></cite>
4
</blockquote>

How to change the quote design in WordPress#

I’ll use Cocoon (a popular Japanese WordPress theme; I’m using the parent theme Cocoon and the child theme Cocoon child) as the example.

Going from Appearance to the theme editor (in Japanese)

Go to Appearance > Theme File Editor.
CSS is usually written in style.css.
(Which CSS file it lives in can vary by theme, so please check.)

Editing WordPress's style.css (in Japanese)

First, find the blockquote CSS in the “Cocoon” style.css.

Copy the whole block and paste it into the child theme’s style.css.
Then all you need to do is rewrite that code!

Using Font Awesome (a web font) for the quotation marks#

In these designs, the quotation marks “ and ” come from the web font Font Awesome.
With a web font, the marks look clean and don’t change from device to device.
To use Font Awesome, paste its loading code inside <head>…</head> like this:

1
<head>
2
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
3
</head>

Using quotation mark characters without a web font#

You can also use plain quotation mark characters instead of a web font.
In that case, change these two lines of the code

1
font-family:'FontAwesome';
2
content:'\f10d';

to this (\f10d stands for “):

1
content:'“';

And change these two lines in the same way

1
font-family:'FontAwesome';
2
content:'\f10e';

to this (\f10e stands for ”):

1
content:'”';

Note: the sizes and spacing are set for the web font, so if you change to plain characters, the layout may shift. Adjust padding (the space inside the box) and font-size (the size of the text) as needed.

Blockquote CSS design samples#

Here are the blockquote designs.
The text inside uses famous sayings (in Japanese), but every sample is based on this HTML:

1
<blockquote>
2
    <p>The quoted text</p>
3
    <cite>Source: Title of the source article</cite>
4
</blockquote>

A line and a quotation mark on the left#

Quote sample 1 (in Japanese)

1
blockquote{
2
    position:relative;
3
    border-left:3px solid #DA8596;
4
    padding-left:10px;
5
}
6
blockquote:before{
7
    position:absolute;
8
    font-family:'FontAwesome';
9
    content:'\f10d';
10
    font-size: 20px;
11
    color:#DA8596;
12
}
13
blockquote p{
14
    position:relative;
15
    padding-left:30px;
16
}
17
blockquote cite{
18
    display: block;
19
    font-size:0.8rem;
20
    color:#F8C8B2;
21
    text-align:right;
22
}

Double line on the left#

Quote design: a double line on the left (in Japanese)

1
blockquote{
2
  position:relative;
3
  border-left:3px double #997bad;
4
  padding-left:10px;
5
  background:#e5e6f4;
6
}
7
blockquote:before{
8
  position:absolute;
9
  font-family:'FontAwesome';
10
  content:'\f10d';
11
  font-size: 18px;
12
  color:#997bad;
13
  padding-top:10px;
14
}
15
blockquote p{
16
  position:relative;
17
  padding: 30px 10px 0px;
18
}
19
blockquote cite{
20
  display: block;
21
  font-size:0.8rem;
22
  color:#997bad;
23
  text-align:right;
24
  padding:10px;
25
}

Quotation marks at the top left and bottom right of a box#

Quote sample 2 (in Japanese)

1
blockquote{
2
    position:relative;
3
    border:1px solid #8BC0B8;
4
    border-radius:10px;
5
    padding:20px;
6
}
7
blockquote:before{
8
    position:absolute;
9
    font-family:'FontAwesome';
10
    content:'\f10d';
11
    font-size: 20px;
12
    color:#8BC0B8;
13
    top:10px;
14
    left:10px;
15
}
16
blockquote:after{
17
    position:absolute;
18
    font-family:'FontAwesome';
19
    content:'\f10e';
20
    font-size: 20px;
21
    color:#8BC0B8;
22
    right:10px;
23
    bottom:10px;
24
}
25
blockquote cite {
26
    display: block;
27
    font-size: 0.8rem;
28
    text-align: right;
29
    color: #D4DED7;
30
    padding-right:20px;
31
}

Lines on the left and right, quotation marks at the top left and bottom right#

Quote design (in Japanese)

1
blockquote{
2
  position:relative;
3
  border-left:2px solid #A5CC80;
4
  border-right:2px solid #A5CC80;
5
  padding:20px;
6
  background:#DDE8C2;
7
}
8
blockquote:before{
9
  position:absolute;
10
  font-family:'FontAwesome';
11
  content:'\f10d';
12
  font-size: 28px;
13
  color:#A5CC80;
14
  top:5px;
15
  left:10px;
16
}
17
blockquote:after{
18
  position:absolute;
19
  font-family:'FontAwesome';
20
  content:'\f10e';
21
  font-size: 28px;
22
  color:#A5CC80;
23
  right:10px;
24
  bottom:5px;
25
}
26
blockquote cite {
27
  display: block;
28
  font-size: 0.8rem;
29
  text-align: right;
30
  color: #808080;
31
  padding-right:20px;
32
}

Quotation marks on lines at the top and bottom#

Quote sample 3 (in Japanese)

1
blockquote{
2
    position:relative;
3
    border-top:1px solid #7A87B0;
4
    border-bottom:1px solid #7A87B0;
5
    padding:10px;
6
}
7
blockquote:before{
8
    position:absolute;
9
    background-color:#FFFFFF;
10
    color:#7A87B0;
11
    font-family:'FontAwesome';
12
    content:'\f10d';
13
    line-height:1;
14
    text-align:center;
15
    top:-20px;
16
    left:-10px;
17
    padding:10px;
18
    font-size:20px;
19
}
20
blockquote:after{
21
    position:absolute;
22
    right:-10px;
23
    bottom:-20px;
24
    background-color:#FFFFFF;
25
    padding:10px;
26
    color:#7A87B0;
27
    font-family:'FontAwesome';
28
    content:'\f10e';
29
    line-height:1;
30
    text-align:center;
31
    font-size:20px;
32
}
33
blockquote cite {
34
    display: block;
35
    padding-right:30px;
36
    font-size: 0.8rem;
37
    text-align: right;
38
    color: #808080;
39
}

A circled quotation mark#

Quote sample 4 (in Japanese)

1
blockquote{
2
    position:relative;
3
    background:#FBDFDF;
4
    border-radius:10px;
5
    padding:20px;
6
}
7
blockquote:before{
8
    position:absolute;
9
    left:45%;
10
    top:-24px;
11
    background-color:#FFFFFF;
12
    color:#808080;
13
    border:2px solid #FBDFDF;
14
    box-sizing:border-box;
15
    font-family:'FontAwesome';
16
    content:'\f10e';
17
    line-height:1;
18
    padding-top:12px;
19
    text-align:center;
20
    width:48px;
21
    height:48px;
22
    font-size:20px;
23
    border-radius:24px;
24
}
25
blockquote p {
26
    color:#808080
27
}
28
blockquote cite {
29
    display: block;
30
    border-top:1px solid #808080;
31
    padding-top:10px;
32
    font-size: 0.8rem;
33
    text-align: center;
34
    color: #808080;
35
}

A square frame with a round quotation mark#

Quote design (in Japanese)

1
blockquote{
2
  position:relative;
3
  border:1px solid #a3c7db;
4
  background:#FFFFF;
5
  padding:20px;
6
}
7
blockquote:before{
8
  position:absolute;
9
  left:45%;
10
  top:-24px;
11
  background-color:#a3c7db;
12
  color:#FFFFFF;
13
  border:2px solid #a3c7db;
14
  box-sizing:border-box;
15
  font-family:'FontAwesome';
16
  content:'\f10d';
17
  line-height:1;
18
  padding-top:12px;
19
  text-align:center;
20
  width:48px;
21
  height:48px;
22
  font-size:20px;
23
  border-radius:24px;
24
}
25
blockquote p {
26
  color:#808080
27
}
28
blockquote cite {
29
  display: block;
30
  padding-top:10px;
31
  font-size: 0.8rem;
32
  text-align: right;
33
  color: #808080;
34
}

Lines at the top and bottom, a quotation mark in the middle#

Quote sample 5 (in Japanese)

1
blockquote {
2
    position: relative;
3
    background-color: #f9fbf9;
4
    border-top: 1px solid #B7D7B7;
5
    border-bottom: 1px solid #B7D7B7;
6
    box-shadow: 0 0 0 10px #f9fbf9;
7
    padding: 20px;
8
}
9
blockquote p {
10
    margin-top: 20px;
11
}
12
blockquote p::before {
13
    font-family:'FontAwesome';
14
    content:'\f10d';
15
    font-size: 24px;
16
    color: #B7D7B7;
17
    position: absolute;
18
    top: 10px;
19
    left: 50%;
20
}
21
blockquote cite {
22
    display: block;
23
    font-size: 0.8rem;
24
    text-align: right;
25
    color: #B7D7B7;
26
}

A quotation mark overlapping the top left#

Quote design: a quotation mark overlapping the top left (in Japanese)

1
blockquote{
2
  position:relative;
3
  background:#F9eada;
4
  border-radius:10px;
5
  padding:20px;
6
}
7
blockquote:before{
8
  position:absolute;
9
  left:5%;
10
  top:-24px;
11
  color:#808080;
12
  box-sizing:border-box;
13
  font-family:'FontAwesome';
14
  content:'\f10d';
15
  line-height:1;
16
  padding-top:12px;
17
  text-align:left;
18
  font-size:40px;
19
}
20
blockquote p {
21
  color:#808080
22
}
23
blockquote cite {
24
  display: block;
25
  border-top:1px solid #808080;
26
  padding-top:10px;
27
  font-size: 0.8rem;
28
  text-align: right;
29
  color: #808080;
30
}

Quotation marks overlapping the top left and bottom right#

Quote design: overlapping the top left and bottom right (in Japanese)

1
blockquote{
2
  position:relative;
3
  background:#CDE7EE;
4
  padding:20px;
5
}
6
blockquote:before{
7
  position:absolute;
8
  left:5%;
9
  top:-24px;
10
  color:#3CAAB1;
11
  box-sizing:border-box;
12
  font-family:'FontAwesome';
13
  content:'\f10d';
14
  line-height:1;
15
  padding-top:12px;
16
  text-align:left;
17
  font-size:40px;
18
}
19
blockquote p {
20
  color:#808080
21
}
22
blockquote cite {
23
  display: block;
24
  border-top:1px dashed #FFFFFF;
25
  padding-top:5px;
26
  padding-bottom:5px;
27
  font-size: 0.8rem;
28
  text-align: right;
29
  color: #808080;
30
}
31
blockquote:after{
32
  position:absolute;
33
  right:5%;
34
  bottom:-25px;
35
  color:#3CAAB1;
36
  box-sizing:border-box;
37
  font-family:'FontAwesome';
38
  content:'\f10e';
39
  line-height:1;
40
  padding-bottom:10px;
41
  text-align:left;
42
  font-size:40px;
43
}

Wrap-up#

In the sample code, the class names are set apart as .sample1 to .sample10.
When you paste the HTML, you can leave out <div class="sample1"> and </div>. In the same way, use the CSS without the .sample1 to .sample5 class names.