Want to build production-ready CSS layouts, animations and UI from scratch?
You just browsed 20 CSS code blocks. Learn the Flexbox, Grid and animation thinking behind them, so the next component starts in your head, not in a copy-paste.
Syntax highlighting is just CSS — the highlighter's only job is to wrap tokens in spans. This block hand-wraps a real ES2024 module in <span class="tok-keyword">, tok-string, tok-comment, tok-function, tok-variable, tok-number and tok-punct, then colours them from one oklch() token scale that follows the Prism / One Dark convention. Drop real Prism, Shiki or highlight.js output in later and the same rules light it up.
The tabbed file switcher every framework doc ships — VS Code chrome with an active-tab underline, muted inactive tabs, a hover close-X, and a panel swap in under 30 lines of vanilla JS. Wired as a real role="tablist" with roving tabindex, so arrow keys, Home/End and screen readers all behave the way the ARIA Authoring Practices say a tab set should.
A GitHub pull-request diff rebuilt as pure CSS: every line carries data-diff="add", "remove" or "context" and attribute selectors do the rest — tinted row, +/- gutter, old/new line numbers from two counters, and an inline-end accent rail. The gutter markers are real role="img" elements with labels, so a screen reader announces "added line" instead of skipping the most important information on screen.
The centrepiece every developer-tool landing page needs: a full editor window mockup at hero scale — macOS traffic lights, an active filename tab, a line-number gutter, a status bar with branch and cursor position, a blinking caret and a slow @property conic-gradient border that breathes light around the frame. Pure CSS, no screenshot, so it stays crisp at any resolution and re-themes with your brand in one variable.
The install block from every good docs site: a terminal shell with a muted $ prompt, npm / pnpm / yarn / bun tabs, and a copy button that copies only the command — never the prompt character. That one detail is the difference between a reader pasting pnpm add framer-motion and pasting $ pnpm add framer-motion straight into a syntax error.
The workhorse of every documentation site — language badge left, filename centre, copy button right — rebuilt with the polish Docusaurus, Mintlify, Nextra and VitePress all converge on. The badge is colour-coded per language from a single data-lang attribute, and it is real text, so screen readers and search crawlers both know this block is TSX.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
The pattern Astro Docs, MDX playgrounds and Sandpack all use: a code block with Run and Reset in the chrome and an output console that slides in underneath. This demo simulates the run (a 420ms pending state, then staggered output lines with a real exit code) so you can drop it into docs today and wire it to a worker, a WASM sandbox or a remote runner later — the UI contract does not change.
Tutorial writing lives or dies on "look at these lines". This block marks a range with data-hl, washes those rows in accent tint with an inline-start rail, dims the rest to 55% so the eye lands where you point, and pins a side annotation to the range — the Docusaurus {4-6} highlight, done in CSS with the range stated as text in the header so it is never colour-only.
The default of this collection: no chrome, no buttons, no decoration — a hairline border, a deep neutral surface, honest monospace type and a comment colour that recedes without disappearing. Everything else in the set is this block plus one idea, which is exactly how a real design system should treat its code display.
A documentation-scale macOS terminal window: real titlebar geometry, traffic lights that light up on hover, a centred window title, an inner top highlight for the glass bevel, and a session of actual command output — pnpm build, a route table, a green success line and a live caret. Smaller and quieter than the hero mockup in demo 04, sized to sit inside a docs page.
A deep dive on the copy interaction itself: a hover tooltip that explains the button before you press it, an icon that morphs to a checkmark, a floating "Copied!" toast that rises and fades, a polite live-region announcement, and an honest error state when the clipboard is unavailable. Twenty-six lines of vanilla JavaScript, zero dependencies.
Line numbers that cannot be copied, generated by CSS counters, beside a filename header with a path breadcrumb and a line-count chip. The gutter is a real column with a divider — so long lines scroll under the numbers rather than pushing them away — and the numbers highlight with their row on hover.
Long lines are the hardest part of shipping code on phones. This block does both correct things: it scrolls horizontally with a fade that appears only while there is more to see, and it offers a word-wrap toggle with hanging indents so wrapped continuations stay readable. Container queries drive the layout, and the fade is powered by a scroll-driven animation with a static fallback.
Full cyberpunk: a cyan-and-magenta neon frame built from four stacked box-shadow layers, a slow breathing pulse, a scanline grid on the surface, magenta-shifted syntax tokens and a blinking block cursor. Loud on purpose — and still measured, because the glow lives in shadows rather than filter, so the code itself stays razor-sharp at 4.6:1 contrast.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A frosted-glass terminal floating over an ambient photographic backdrop: backdrop-filter: blur(22px) saturate(180%), a hairline inner highlight along the top edge that simulates a lit glass rim, a soft outer shadow for lift, and a token palette bumped in lightness so it survives a translucent surface. Everything degrades to a solid card where backdrop-filter is unavailable.
The most-used code style on any docs site and the one most often done badly. These pills get the four details right: padding that does not break the line box, a font size relative to the surrounding text, a background that works inside links and headings, and box-decoration-break so a pill wrapping across two lines still looks like one thing.
Soft-UI done responsibly: the code sits in a recessed well carved out of the surface by two opposed inset shadows — light from the top-left, dark from the bottom-right — with a matching raised chip for the filename. Neumorphism's usual failure is contrast, so the well is tinted a step darker than the panel and the type stays at 8:1, which keeps the look without the audit failure.
Code on the left, the thing it renders on the right — and the divider is genuinely draggable with zero JavaScript, using the CSS resize property on the code pane. A container query stacks the panes when the block gets narrow, so the same component works in a wide tutorial and a phone. The preview is a real card built from the code beside it, photo included.
A code block designed for reading, not for a dark terminal: a warm off-white paper surface, a serif italic filename in the margin, a hairline rule instead of a chrome bar, generous leading, and a restrained light syntax palette where every token clears 4.5:1 on paper. The style long-form publishers reach for when code appears inside an essay.
Long snippets should not eat a whole screen. This wrapper collapses to six lines with a mask-based fade, then expands to full height on click — no JavaScript, using a hidden checkbox and :checked. The label swaps between "Show more" and "Show less" with a rotating chevron, and the collapsed region is masked rather than covered, so the fade works on any surface.
FAQ
Frequently asked questions
How do I add syntax highlighting to a CSS code block without Prism.js or highlight.js?
Wrap each token in a span with a semantic class: <span class="tok-keyword">const</span>, <span class="tok-string">'hello'</span>, <span class="tok-comment">// note</span>. Then color each class with a Prism / One Dark palette convention (keyword violet, string green, comment gray, function blue, variable amber, number pink). No JavaScript, no library — the tokens ship in the HTML you paste. The Syntax Highlighting demo (#01) shows the full color scheme with a real JS snippet + light-mode variant, and stays Prism-compatible so you can swap in real Prism markup later without changing the CSS.
How do I build multi-file tab switcher code blocks in pure CSS?
Use radio inputs + the :checked sibling combinator. Hide <input type="radio" name="cbk-02-tabs"> for each tab (clip-path visually-hidden pattern, never display: none which breaks tab order), then style the sibling <label> elements as tabs. Each code panel uses :has() or general-sibling ~ selectors to show only when its radio is checked. No JavaScript needed for the switching. The Multi-File Tabs demo (#02) ships this pattern with VS Code chrome (filename tabs, close-X icons, syntax-highlighted content) and includes an @supports not selector(:has(*)) fallback for older browsers.
How do I add diff highlighting (green added / red removed) to code blocks?
Give each line a data-diff attribute — data-diff="add", data-diff="remove", or data-diff="context" — and style with attribute selectors. Added lines get green background tint + + gutter marker via a ::before pseudo-element; removed lines get red background + - marker + optional strikethrough. Context lines stay plain. GitHub PR / GitLab MR aesthetic without any diff library. The Diff Code Block demo (#03) shows a 12-line function refactor with all three states + a subtle gutter treatment that keeps line numbers readable alongside the diff markers.
How do I match Docusaurus / Mintlify / Nextra code block styling?
Three chrome elements in the top row: a language pill badge on the LEFT (color-coded per language — blue for JS/TS, green for CSS, gray for shell), the filename in the CENTER, and a copy button on the RIGHT. The code panel below has a subtle bottom border-radius (top corners squared to butt against the chrome bar) and a soft box-shadow for elevation. The Documentation Code Block demo (#06) ships this exact pattern with all three chrome elements, Prism-compatible token markup for the code content, and a working navigator.clipboard.writeText() copy handler. Docs sites converge on this shape because it maximizes information density without cluttering the code view.
How do I make a copy button work inside an iframe-sandboxed environment?
Use navigator.clipboard.writeText(codeEl.textContent) inside a try / catch. Clipboard API works in sandbox="allow-scripts" iframes without needing allow-forms or any other permission. On success, toggle a .is-copied class + aria-live="polite" announcement region for the "Copied!" state, then setTimeout a class removal after 1.6 seconds to reset. On failure, catch the promise rejection and show an error state with a fallback selection-based instruction. The Copy to Clipboard demo (#11) is the reference implementation — under 25 lines JS, handles clipboard API permission failures, and works inside our /try/ playground iframe.
How do I add line numbers via counter-increment vs <code><ol></code> — accessibility trade-offs?
Two viable approaches with different trade-offs. (1) counter-increment: set counter-reset: line on <pre>, then each <span class="row"> gets ::before { counter-increment: line; content: counter(line) }. Numbers are CSS-generated so they don't get copied with triple-click — but screen readers may or may not announce them depending on speak: never support. (2) <ol> markup: <ol><li>code line</li></ol>. Screen readers announce each line as an ordered list item — accessible by default — but selection may include the numbers depending on browser. The Line Numbers demo (#12) uses counter-increment (more common pattern) and documents the trade-off in the gotchas panel so you can swap to <ol> if you need list-semantic announcement.
How is this collection different from Prism.js, highlight.js, or Shiki?
Prism (~15KB gzipped) and highlight.js (~24KB gzipped) are JavaScript runtimes that tokenize plain-text code AT RUNTIME in the browser. Shiki (~350KB with themes) runs at build time to produce pre-highlighted HTML. All three are excellent for large-scale content sites where tokenization needs to work on arbitrary code snippets. This collection ships different tradeoffs: the code is pre-tokenized in the HTML you paste, styled by ~2-4KB of CSS per demo, no runtime dependency. If you need to highlight arbitrary user-submitted code → use Prism/highlight.js/Shiki. If you write documentation snippets by hand + want zero runtime cost + pre-highlighted output → this collection is the shorter path.
Are these CSS code blocks accessible to screen readers?
Yes. Every code sample uses semantic <pre><code class="language-xyz"> markup (never styled <div>s), so assistive tech announces them as preformatted code. Icon-only buttons (Copy, Run, Reset) carry aria-label describing the action. Multi-file tabs implement the WAI-ARIA tablist pattern (role="tablist", role="tab", aria-selected, aria-controls, role="tabpanel"). Diff blocks announce line status via aria-label on gutter markers ("added line" / "removed line"). Every continuous animation is wrapped in @media (prefers-reduced-motion: reduce) and either disabled or reduced to a snap transition. Focus rings are visible on every interactive element (2px minimum, high-contrast per WCAG 2.4.13).
