19 CSS Blockquote Designs

Highlighted Run

Body text with a CSS mark-style highlight behind one punchy phrase — the editorial trick for drawing the eye to the key claim in a long quote.

Highlighted Run the 9th of 19 designs in the 19 CSS Blockquote Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.

Live preview

The code

<figure class="cbq-highlight">
  <blockquote>
    <p>
      Most teams optimize for <mark>shipping faster</mark> when they should be optimizing for
      <mark>shipping smaller</mark>.
    </p>
  </blockquote>
  <figcaption>— Sara López, Engineering Manager</figcaption>
</figure>

.cbq-highlight {
  max-width: 360px;
  padding: 16px 4px;
  font-family: Georgia, serif;
  color: #e9e7ff;
}

.cbq-highlight blockquote {
  margin: 0;
}

.cbq-highlight p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
}

.cbq-highlight mark {
  background: linear-gradient(180deg, transparent 55%, rgba(124, 108, 255, 0.55) 55%);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

.cbq-highlight figcaption {
  margin-top: 12px;
  font-size: 12px;
  color: #b8b6d4;
  font-family: system-ui, sans-serif;
}