Robert Birming

Blockquote styles

  1. Bear Blog library
  2. Styles

Blockquotes are one of those elements that barely get noticed until they're styled well. Then suddenly they carry weight on the page.

This page collects small CSS tweaks and variations for blockquotes. Each one works out of the box, but they're just as much meant as a starting point. Mix and match, tweak the values, or use them to learn more about theme styling.

Last updated 1 week, 2 days ago.

Bear mark

Bear mark blockquote

/* Blockquote: bear mark | robertbirming.com */
blockquote {
  position: relative;
  margin-inline: 0;
  padding: 0.75em 1.25em;
  font-style: italic;
  color: var(--text-color);
  border: 2px solid var(--link-color);
  border-radius: 6px;
}

blockquote::after {
  content: "ʕ•ᴥ•ʔ" / "";
  position: absolute;
  inset-block-end: -0.75em;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 0 0.5em;
  font-size: 0.9em;
  font-style: normal;
  color: var(--link-color);
  background: var(--background-color);
}

Accent border

Accent border blockquote

/* Blockquote: accent border | robertbirming.com */
blockquote {
  margin-inline-start: 0;
  padding-inline-start: 1rem;
  font-style: normal;
  border-inline-start: 3px solid var(--link-color);
}

Large quote mark

Large quote mark blockquote

/* Blockquote: large quote mark | robertbirming.com */
blockquote {
  position: relative;
  padding-inline-start: 2rem;
  font-style: normal;
  color: var(--text-color);
  border-inline-start: none;
}

blockquote::before {
  content: "“" / "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -0.2rem;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--link-color);
}

Italic muted

Italic muted blockquote

/* Blockquote: italic muted | robertbirming.com */
blockquote {
  padding-inline-start: 0;
  font-style: italic;
  color: color-mix(in srgb, var(--text-color), transparent 30%);
  border-inline-start: none;
}

Background tint

Background tint blockquote

/* Blockquote: background tint | robertbirming.com */
blockquote {
  padding: 1rem 1.25rem;
  font-style: normal;
  background: color-mix(in srgb, var(--text-color), var(--background-color) 94%);
  border-inline-start: none;
  border-radius: 6px;
}

Quote mark with citation

Quote mark with citation blockquote

/* Blockquote: quote mark with citation | robertbirming.com */
blockquote {
  position: relative;
  margin-inline: 0;
  padding-block: 0.9em;
  padding-inline: 1.5em;
  font-style: normal;
  color: var(--text-color);
  background-color: color-mix(in srgb, var(--link-color), var(--background-color) 94%);
  border-inline-start: 3px solid var(--link-color);
  border-radius: 6px;
}

blockquote p {
  margin-block: 0.4em;
}

blockquote p:first-child {
  margin-block-start: 0;
}

blockquote p:last-child {
  margin-block-end: 0;
}

blockquote::before {
  content: "“" / "";
  position: absolute;
  inset-block-start: -0.15em;
  inset-inline-start: 0.35em;
  font-size: 2.2em;
  line-height: 1;
  color: color-mix(in srgb, var(--link-color), transparent 50%);
}

blockquote cite {
  display: block;
  margin-block-start: 0.7em;
  font-style: normal;
  color: color-mix(in srgb, var(--text-color), transparent 40%);
}

blockquote cite::before {
  content: "— ";
}

Labeled tag

Labeled tag blockquote

/* Blockquote: labeled tag | robertbirming.com */
blockquote {
  position: relative;
  margin-inline: 0;
  padding: 0.75em 1.25em;
  font-style: italic;
  color: var(--text-color);
  border: 2px solid var(--link-color);
  border-inline-start-width: 6px;
}

blockquote::before {
  content: "QUOTE" / "";
  position: absolute;
  inset-block-start: -0.75em;
  inset-inline-start: 0.8em;
  padding: 0 0.4em;
  font-size: 0.7em;
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--link-color);
  background: var(--background-color);
}

Heart accent

Heart accent blockquote

/* Blockquote: heart accent | robertbirming.com */
blockquote {
  position: relative;
  margin-block: 1.6em;
  margin-inline: 0;
  padding: 0.85em 1.25em;
  font-style: italic;
  color: var(--text-color);
  background: color-mix(in srgb, var(--link-color), var(--background-color) 92%);
  border-inline-start: 3px solid var(--link-color);
  border-radius: 8px;
}

blockquote::after {
  content: "♥" / "";
  position: absolute;
  inset-block-end: -0.6em;
  inset-inline-end: 1em;
  padding-inline: 0.3em;
  font-style: normal;
  line-height: 1;
  color: var(--link-color);
  background-color: var(--background-color);
}

blockquote p {
  margin-block: 0;
}

Bordered card

Bordered card blockquote

/* Blockquote: bordered card | robertbirming.com */
blockquote {
  position: relative;
  margin-block: 1.6em;
  margin-inline: 0;
  padding: 1.1rem 1.25rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--text-color);
  background: color-mix(in srgb, var(--link-color), var(--background-color) 96%);
  border: 1px solid color-mix(in srgb, var(--link-color), var(--background-color) 76%);
  border-radius: 8px;
}

blockquote p {
  margin-block: 0.8em;
}

blockquote p:first-child {
  margin-block-start: 0;
}

blockquote p:last-child {
  margin-block-end: 0;
}

Minimal

Minimal blockquote

/* Blockquote: minimal | robertbirming.com */
blockquote {
  margin-inline: 0;
  padding-inline-start: 0;
  font-size: 1.1em;
  font-style: italic;
  color: color-mix(in srgb, var(--text-color), transparent 15%);
  border-inline-start: none;
}

Centered quote

Centered quote blockquote

/* Blockquote: centered quote | robertbirming.com */
blockquote {
  max-width: 40ch;
  margin-block: 2rem;
  margin-inline: auto;
  padding-inline-start: 0;
  font-size: 1.2em;
  font-style: italic;
  text-align: center;
  border-inline-start: none;
}

blockquote cite {
  display: block;
  margin-block-start: 1rem;
  font-style: normal;
}

blockquote cite::before {
  content: "— ";
}

Top rule

Top rule blockquote

/* Blockquote: top rule | robertbirming.com */
blockquote {
  margin-inline: 0;
  padding-block-start: 1rem;
  padding-inline-start: 0;
  font-style: italic;
  border-inline-start: none;
  border-block-start: 3px solid var(--link-color);
}

Corner accent

Corner accent blockquote

/* Blockquote: corner accent | robertbirming.com */
blockquote {
  position: relative;
  margin-inline: 0;
  padding: 1rem;
  font-style: italic;
  border-inline-start: none;
}

blockquote::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1rem;
  height: 1rem;
  border-block-start: 3px solid var(--link-color);
  border-inline-start: 3px solid var(--link-color);
}

Double border

Double border blockquote

/* Blockquote: double border | robertbirming.com */
blockquote {
  margin-inline: 0;
  padding-inline-start: 1rem;
  font-style: normal;
  border-inline-start: 6px double var(--link-color);
}

Have fun giving your quotes the weight they deserve.

Want more? Check out the full Bear Blog library.