25 CSS Blockquotes13 / 25

CSS onlyMIT licensed

Thick Vertical Accent Rail CSS Blockquote

The left border grown up into architecture: a 10px rail carrying a vertical gradient, drawn with border-image so a real border can hold a gradient at all — plus a grid layout where the rail is its own column, letting a label sit rotated inside it writing-mode: vertical-rl style. Where demo 05 whispers, this one declares: statement quotes for reports, annual reviews and manifesto pages, with the rail's gradient tuned so its midpoint aligns with the quote's optical center.

Published Updated

Live Demo
Try it

The code

<section class="bq-13" aria-label="Thick vertical accent rail blockquote demo">
  <div class="bq-13__stage">
    <figure class="bq-13__grid">
      <div class="bq-13__rail" aria-hidden="true"><span>FIELD NOTES — VOL 7</span></div>
      <div class="bq-13__content">
        <blockquote>
          <p>We didn't set out to build infrastructure. We set out to answer one support ticket properly, and infrastructure is what answering it properly turned out to require.</p>
        </blockquote>
        <figcaption class="bq-13__by"><strong>Yusuf Adeyemi</strong> · Founding Engineer, Cachet</figcaption>
      </div>
    </figure>
    <p class="bq-13__chip" aria-hidden="true">border-image gradient rail · grid-column rail · writing-mode:vertical-rl</p>
  </div>
</section>
.bq-13,
.bq-13 *,
.bq-13 *::before,
.bq-13 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bq-13 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  --bg: oklch(0.2 0.015 260);
  --ink: oklch(0.96 0.008 250);
  --mut: oklch(0.66 0.02 255);
  --a: oklch(0.78 0.14 85);
  --b: oklch(0.65 0.19 30);
  --c: oklch(0.6 0.2 330);
  font-family: 'Segoe UI',system-ui,sans-serif;
  color: var(--ink);
}

.bq-13__stage {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 28px;
  padding: clamp(20px,5vw,56px);
  background: linear-gradient(200deg,oklch(0.24 0.02 270),var(--bg) 60%);
  overflow-y: auto;
}

.bq-13__grid {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 26px;
  width: min(100%,620px);
}

.bq-13__rail {
  display: grid;
  place-items: end center;
  background: linear-gradient(180deg,var(--a),var(--b) 55%,var(--c));
  border-radius: 0;
  padding-block: 14px;
}

.bq-13__rail span {
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  color: oklch(0.15 0.02 260/.85);
  white-space: nowrap;
}

.bq-13__content blockquote p {
  font-size: clamp(20px,2.8vw,28px);
  line-height: 1.44;
  font-weight: 650;
  letter-spacing: -.018em;
  text-wrap: pretty;
}

.bq-13__by {
  margin-top: 18px;
  font-size: 14px;
  color: var(--mut);
}

.bq-13__by strong {
  color: var(--ink);
  font-weight: 650;
  background: linear-gradient(90deg,var(--a),var(--b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.bq-13__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  color: var(--mut);
  padding: 7px 13px;
  border: 1px solid oklch(1 0 0/.14);
  border-radius: 99px;
}

@media (prefers-reduced-motion: reduce) {
  .bq-13 * {
    transition-duration: .01ms !important;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Blockquote from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Thick Vertical Accent Rail CSS Blockquote
Source: https://codefronts.com/snippets/css-blockquotes/vertical-rail/

The left border grown up into architecture: a 10px rail carrying a vertical gradient, drawn with border-image so a real border can hold a gradient at all — plus a grid layout where the rail is its own column, letting a label sit rotated inside it writing-mode: vertical-rl style. Where demo 05 whispers, this one declares: statement quotes for reports, annual reviews and manifesto pages, with the rail's gradient tuned so its midpoint aligns with the quote's optical center.
## HTML
```html
<section class="bq-13" aria-label="Thick vertical accent rail blockquote demo">
  <div class="bq-13__stage">
    <figure class="bq-13__grid">
      <div class="bq-13__rail" aria-hidden="true"><span>FIELD NOTES — VOL 7</span></div>
      <div class="bq-13__content">
        <blockquote>
          <p>We didn't set out to build infrastructure. We set out to answer one support ticket properly, and infrastructure is what answering it properly turned out to require.</p>
        </blockquote>
        <figcaption class="bq-13__by"><strong>Yusuf Adeyemi</strong> · Founding Engineer, Cachet</figcaption>
      </div>
    </figure>
    <p class="bq-13__chip" aria-hidden="true">border-image gradient rail · grid-column rail · writing-mode:vertical-rl</p>
  </div>
</section>
```
## CSS
```css
.bq-13,
.bq-13 *,
.bq-13 *::before,
.bq-13 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bq-13 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  --bg: oklch(0.2 0.015 260);
  --ink: oklch(0.96 0.008 250);
  --mut: oklch(0.66 0.02 255);
  --a: oklch(0.78 0.14 85);
  --b: oklch(0.65 0.19 30);
  --c: oklch(0.6 0.2 330);
  font-family: 'Segoe UI',system-ui,sans-serif;
  color: var(--ink);
}

.bq-13__stage {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 28px;
  padding: clamp(20px,5vw,56px);
  background: linear-gradient(200deg,oklch(0.24 0.02 270),var(--bg) 60%);
  overflow-y: auto;
}

.bq-13__grid {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 26px;
  width: min(100%,620px);
}

.bq-13__rail {
  display: grid;
  place-items: end center;
  background: linear-gradient(180deg,var(--a),var(--b) 55%,var(--c));
  border-radius: 0;
  padding-block: 14px;
}

.bq-13__rail span {
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  color: oklch(0.15 0.02 260/.85);
  white-space: nowrap;
}

.bq-13__content blockquote p {
  font-size: clamp(20px,2.8vw,28px);
  line-height: 1.44;
  font-weight: 650;
  letter-spacing: -.018em;
  text-wrap: pretty;
}

.bq-13__by {
  margin-top: 18px;
  font-size: 14px;
  color: var(--mut);
}

.bq-13__by strong {
  color: var(--ink);
  font-weight: 650;
  background: linear-gradient(90deg,var(--a),var(--b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.bq-13__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  color: var(--mut);
  padding: 7px 13px;
  border: 1px solid oklch(1 0 0/.14);
  border-radius: 99px;
}

@media (prefers-reduced-motion: reduce) {
  .bq-13 * {
    transition-duration: .01ms !important;
  }
}
```

How this works

A plain border can't hold a gradient — border-image is the escape hatch:

.rail-quote{
  border-inline-start:10px solid;
  border-image:linear-gradient(
    180deg, var(--a), var(--b) 55%, var(--c)) 1;
  padding-inline-start:26px;
}

The trailing 1 is the border-image-slice — it tells the browser to slice the gradient 1 unit into each edge, effectively painting the whole gradient down the strip. One caveat pattern to know: border-image ignores border-radius, so this is for square-edged rails (rounded gradient rails need the padding-box/border-box background sandwich from demo 06).

The demo's second composition goes further: instead of a border, the rail is a grid COLUMN — grid-template-columns:14px 1fr — which turns the stripe into a real element that can host content. Inside it, a label runs vertically via writing-mode:vertical-rl with rotate:180deg to read bottom-up, the way book spines do. A border can decorate; a column can speak. That's the upgrade this pattern is really about: once the rail is structural, it can carry section numbers, dates, or category labels without touching the quote's own box.

Make it yours

  • Rail weight: 6px = confident, 10px = statement, 16px+ = poster. Scale padding-inline-start with it (roughly 2.5× the rail).
  • Solid rail: skip border-image entirely and use border-inline-start:10px solid var(--acc) — you only need the image trick when a gradient is involved.
  • Spine label: swap the vertical text for a rotated section number ('04') at heavy weight and 40% opacity — annual-report energy.
  • Multi-quote rhythm: alternate the gradient's direction (180deg/0deg) on successive quotes so rails visually hand off down the page.

Gotchas — read before shipping

  • border-image silently discards border-radius — square edges only. For rounded gradient borders use the two-layer background technique instead.
  • You must still declare a border WIDTH (the 'solid' shorthand here) — border-image paints into the border box; with zero width nothing shows.
  • writing-mode:vertical-rl reads top-to-bottom; add rotate:180deg for the bottom-up book-spine direction English readers expect on a left spine.
  • In the grid version, mind the rail's contrast if it hosts text — a 40%-alpha label on a mid-gradient can dip below WCAG AA; test at the gradient's lightest stop.

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

Floor set by oklch(), text-wrap as this demo is written. The core technique itself goes back further — Chrome 111+.

border-image with gradients: Chrome 21 / Safari 6 / Firefox 29 — ancient. writing-mode is universal since 2016. Floor is the oklch() gradient stops.

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →