25 CSS Blockquotes08 / 25

CSS onlyMIT licensed

Brutalist CSS Blockquote Design

Neo-brutalism's whole grammar in one component: 3px ink borders, a hard offset shadow with zero blur (box-shadow: 8px 8px 0), an unapologetic yellow, uppercase mono labels, and no border-radius anywhere. The card presses INTO its own shadow on hover — translate(4px,4px) while the shadow shrinks to 4px — the tactile push-button move the style is famous for. A rotated attribution sticker breaks the grid just enough to prove the rawness is designed, not defaulted.

Published Updated

Live Demo
Try it

The code

<section class="bq-08" aria-label="Brutalist blockquote demo">
  <div class="bq-08__stage">
    <figure class="bq-08__wrap">
      <div class="bq-08__card" tabindex="0">
        <p class="bq-08__label">Quote_004.txt</p>
        <blockquote>
          <p>Perfection is a lie the tools sell you. Ship the thing with the seams showing — at least everyone can see how it's made.</p>
        </blockquote>
      </div>
      <figcaption class="bq-08__sticker">— RIKO TANAKA, ZINE PUBLISHER</figcaption>
    </figure>
    <p class="bq-08__chip" aria-hidden="true">box-shadow:8px 8px 0 · translate press · radius:0</p>
  </div>
</section>
.bq-08,
.bq-08 *,
.bq-08 *::before,
.bq-08 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bq-08 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  --bg: oklch(0.93 0.02 95);
  --ink: oklch(0.2 0.01 90);
  --pop: oklch(0.9 0.18 100);
  --paper: oklch(0.99 0.005 95);
  font-family: 'Segoe UI',system-ui,sans-serif;
  color: var(--ink);
}

.bq-08__stage {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 30px;
  padding: clamp(20px,5vw,56px);
  background: repeating-linear-gradient(0deg,transparent 0 23px,oklch(0.86 0.02 95) 23px 24px),var(--bg);
  overflow-y: auto;
}

.bq-08__wrap {
  position: relative;
  width: min(100%,540px);
}

.bq-08__card {
  border: 3px solid var(--ink);
  background: var(--pop);
  padding: 26px 28px 30px;
  box-shadow: 8px 8px 0 var(--ink);
  transition: translate .15s ease-out,box-shadow .15s ease-out;
  cursor: default;
}

.bq-08__card:hover,
.bq-08__card:focus-visible {
  translate: 4px 4px;
  box-shadow: 4px 4px 0 var(--ink);
}

.bq-08__card:focus-visible {
  outline: 3px dashed var(--ink);
  outline-offset: 4px;
}

.bq-08__label {
  display: inline-block;
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 5px 9px;
  margin-bottom: 16px;
}

.bq-08__card blockquote p {
  font-size: clamp(19px,2.6vw,25px);
  line-height: 1.42;
  font-weight: 800;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.bq-08__sticker {
  position: absolute;
  right: -10px;
  bottom: -22px;
  rotate: -2deg;
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: 8px 12px;
  box-shadow: 5px 5px 0 var(--ink);
}

.bq-08__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  padding: 7px 13px;
  border: 2px solid var(--ink);
  background: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  .bq-08 * {
    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: Brutalist CSS Blockquote Design
Source: https://codefronts.com/snippets/css-blockquotes/brutalist-stamp/

Neo-brutalism's whole grammar in one component: 3px ink borders, a hard offset shadow with zero blur (box-shadow: 8px 8px 0), an unapologetic yellow, uppercase mono labels, and no border-radius anywhere. The card presses INTO its own shadow on hover — translate(4px,4px) while the shadow shrinks to 4px — the tactile push-button move the style is famous for. A rotated attribution sticker breaks the grid just enough to prove the rawness is designed, not defaulted.
## HTML
```html
<section class="bq-08" aria-label="Brutalist blockquote demo">
  <div class="bq-08__stage">
    <figure class="bq-08__wrap">
      <div class="bq-08__card" tabindex="0">
        <p class="bq-08__label">Quote_004.txt</p>
        <blockquote>
          <p>Perfection is a lie the tools sell you. Ship the thing with the seams showing — at least everyone can see how it's made.</p>
        </blockquote>
      </div>
      <figcaption class="bq-08__sticker">— RIKO TANAKA, ZINE PUBLISHER</figcaption>
    </figure>
    <p class="bq-08__chip" aria-hidden="true">box-shadow:8px 8px 0 · translate press · radius:0</p>
  </div>
</section>
```
## CSS
```css
.bq-08,
.bq-08 *,
.bq-08 *::before,
.bq-08 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bq-08 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  --bg: oklch(0.93 0.02 95);
  --ink: oklch(0.2 0.01 90);
  --pop: oklch(0.9 0.18 100);
  --paper: oklch(0.99 0.005 95);
  font-family: 'Segoe UI',system-ui,sans-serif;
  color: var(--ink);
}

.bq-08__stage {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 30px;
  padding: clamp(20px,5vw,56px);
  background: repeating-linear-gradient(0deg,transparent 0 23px,oklch(0.86 0.02 95) 23px 24px),var(--bg);
  overflow-y: auto;
}

.bq-08__wrap {
  position: relative;
  width: min(100%,540px);
}

.bq-08__card {
  border: 3px solid var(--ink);
  background: var(--pop);
  padding: 26px 28px 30px;
  box-shadow: 8px 8px 0 var(--ink);
  transition: translate .15s ease-out,box-shadow .15s ease-out;
  cursor: default;
}

.bq-08__card:hover,
.bq-08__card:focus-visible {
  translate: 4px 4px;
  box-shadow: 4px 4px 0 var(--ink);
}

.bq-08__card:focus-visible {
  outline: 3px dashed var(--ink);
  outline-offset: 4px;
}

.bq-08__label {
  display: inline-block;
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 5px 9px;
  margin-bottom: 16px;
}

.bq-08__card blockquote p {
  font-size: clamp(19px,2.6vw,25px);
  line-height: 1.42;
  font-weight: 800;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.bq-08__sticker {
  position: absolute;
  right: -10px;
  bottom: -22px;
  rotate: -2deg;
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: 8px 12px;
  box-shadow: 5px 5px 0 var(--ink);
}

.bq-08__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  padding: 7px 13px;
  border: 2px solid var(--ink);
  background: var(--paper);
}

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

How this works

Brutalism is a shortlist of refusals plus one signature shadow:

.card{
  border:3px solid var(--ink);
  border-radius:0;                       /* the refusal */
  background:oklch(0.9 0.18 100);         /* flat, loud   */
  box-shadow:8px 8px 0 var(--ink);        /* hard offset  */
  transition:translate .15s, box-shadow .15s;
}
.card:hover, .card:focus-within{
  translate:4px 4px;                      /* press in…    */
  box-shadow:4px 4px 0 var(--ink);        /* …shadow gives */
}

The shadow is the tell: 8px 8px 0 — the third value (blur) is zero, so the shadow is a solid copy of the card's silhouette, reading as a physical second layer rather than ambient light. The hover completes the metaphor: the card translates diagonally by exactly the amount the shadow shrinks, so the card's far edge appears fixed in space and the card seems to physically depress. Get those two numbers out of sync and the illusion dies.

Everything else is discipline. One flat background per surface (no gradients), ink borders at 3px (2px reads normal, 4px reads cartoon), system mono for labels with letter-spacing:.08em and uppercase, and exactly one rule-breaker — here the attribution sticker at rotate:-2deg. Brutalism with two rotated elements is a mess; with one, it's a style.

Make it yours

  • Palette swaps: classic pairings are yellow/ink (here), pink oklch(0.85 0.1 350)/ink, and mint oklch(0.9 0.09 165)/ink — always flat, always with the same ink border.
  • Shadow direction: 8px 8px says light from top-left; -8px 8px flips it. Keep it consistent across every brutalist element on the page.
  • Softer brutalism: 2px borders + 5px shadow + one 4px radius gives you 'brutalist-lite' that shipping products (Gumroad, Figma marketing) actually use.
  • Sticker text: the rotated chip is a real <figcaption> — swap the rotation to +2deg or pin it half-out of the card with a negative margin for extra collage energy.

Gotchas — read before shipping

  • border-radius:0 must be explicit if your reset or framework rounds things — one rounded corner ruins the whole grammar.
  • Hard shadows double the component's visual footprint: leave 8px+ of breathing room in the layout or the shadow will kiss the next element.
  • The press effect needs translate + shadow to change by the SAME delta — animate only one and the card looks like it's sliding, not pressing.
  • Contrast is brutalism's free win — but check the sticker: white-on-ink at 12px uppercase mono is fine, ink-on-yellow at low weights isn't. Run the pair through a contrast checker.

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+.

Borders and offset shadows are ancient CSS; translate as a standalone property is Chrome 104 / Safari 14.1 / Firefox 72. Floor is the oklch() yellow — hex works identically.

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →