12 CSS Code Blocks

Q: How do I make a CSS code block with a copy button?

Wrap your <pre><code> in a container with position: relative , then absolutely position a <button> at the top-right with position: absolute; top: 12px; right: 12px . Hide it at rest ( opacity: 0 ) and reveal on container hover via .codeblock:hover .copy { opacity: 1 } . The click handler calls navigator.clipboard.writeText(codeEl.innerText) inside a try / catch and toggles a temporary .is-done class with setTimeout for the "Copied!" confirmation state. The Copy Button demo (#03) in this gallery is the production-ready reference — it handles browsers without clipboard API permission gracefully and resets after 1.6 seconds.

Q: How do I add line numbers to a CSS code block?

Use counter-reset + counter-increment + a ::before pseudo-element so the numbers are generated CSS content, not real text nodes — which means line numbers never get copied with the code when a visitor triple-clicks and copies. Set counter-reset: line on the wrapper, then each row gets ::before { counter-increment: line; content: counter(line); } styled inside a fixed-width gutter ( grid-template-columns: 3.4em 1fr keeps the gutter and the code in two clean columns). The Line Numbers demo (#04) ships this with an editor-style filename tab bar so it doubles as a multi-file documentation panel.

Q: Can I build an expandable / collapsible code block with no JavaScript?

Yes — the checkbox hack handles it cleanly. Hide an <input type="checkbox" id="exp"> , pair it with a <label for="exp"> that acts as the toggle button, and use the general-sibling combinator: .toggle:checked ~ .codewrap pre { max-height: 1200px } overrides the resting max-height: 190px with a transition: max-height .45s . A linear-gradient fade mask at the bottom hints at hidden content; .toggle:checked ~ .codewrap .fade { opacity: 0 } dissolves it when expanded. The Expandable demo (#12) ships this with a rotating chevron and proper aria-label on the checkbox for screen readers.

Q: How do I make a CSS code block responsive on mobile?

Two strategies, opposite trade-offs: (1) overflow-x: auto; white-space: pre keeps the source on one row and adds a horizontal scrollbar — preserves visual structure, costs a scroll affordance. (2) white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere wraps mid-token if needed — no scrollbar, costs the visual one-line meaning. Pick (1) for code where line structure matters (multi-line functions) and (2) for code with long single-token strings (URLs, hashes, file paths). The Responsive demo (#05) shows both side by side with a styled gradient scrollbar so you can decide per-context.

Q: How do I style inline <code> pills inside paragraphs?

Three rules make inline <code> pills sit right inside prose: (1) font-size: .82em so the pill scales with the paragraph rather than fighting it; (2) vertical-align: middle so the rounded background never pushes the line taller than its siblings; (3) white-space: nowrap so identifiers like display: grid never get split across a line break. Add padding: 2px 8px; border-radius: 999px for the full pill shape, and use utility classes ( .warn , .blue ) to swap only the background and text color when you need variants. The Inline Pill demo (#08) demonstrates the pattern in a real article context with a drop-cap lead paragraph.

Q: Are these CSS code blocks accessible to screen readers?

Yes. Every code sample uses real <pre><code> elements (not styled <div> s) so assistive tech announces them as preformatted code. Icon-only buttons (the Copy button in demo #03) carry aria-label . Decorative elements — traffic-light dots, scan-line blips, glow orbs — are marked aria-hidden="true" so they don't get spelled out. The Expandable toggle (demo #12) uses a visible-label checkbox with aria-label describing the action. Every continuous animation is wrapped in @media (prefers-reduced-motion: reduce) and either disabled or reduced to a snap transition.

Twelve hand-coded CSS code blocks you can copy in one click — built for every place a developer needs to display code on the web: a minimalist dark mode code box, a mac terminal CSS code block with traffic-light chrome, a working CSS code block with copy button driven by navigator.clipboard, a CSS code block with line numbers powered by counter-increment (numbers never get copied with the source), a mobile-responsive overflow-x vs word-wrap split, a neon glow tech block, a glassmorphism code block in CSS with frosted backdrop-filter, inline <code> pill styling for editorial prose, a neumorphic embedded surface, a split-pane code-plus-live-preview container, a Stripe-style light mode editorial theme, and a pure-CSS expandable / collapsible wrapper that uses the checkbox hack — no JavaScript required. Every demo ships semantic <pre><code>, scoped .ccb-XXX class names that never collide with host styles, prefers-reduced-motion fallbacks, and MIT licensing. No frameworks, no build step.

12 unique CSS code blocks 11 Pure CSS 1 CSS + JS 100% copy-paste ready Published Jun 3, 2026

01 / 12

Minimalist Dark Mode Code Box

Pure CSS

A clean, high-contrast dark code container on a deep navy gradient with a glowing left-accent border, JetBrains Mono type, subtle line numbers, and a muted meta bar carrying a colored language tag.

Best fordocumentation hero blocks, blog post code samples, marketing pages, and any dark-themed dev site that needs a single focal code reference.

Live Demo Try it

02 / 12

Mac-Style Window Container

Pure CSS

A floating macOS-style window with the canonical red / yellow / green traffic-light controls and a filename in the title bar, sitting on a soft pastel gradient with a 3D tilt that straightens on hover.

Best forproduct hero sections, landing-page demos, slide thumbnails, and any place a code sample needs to feel like a real app surface instead of a flat block.

Live Demo Try it

03 / 12

Code Block with Copy to Clipboard Button

Light JS

A teal-accented dark code block using <code>position: relative</code> on the container and <code>position: absolute</code> on a copy button that is hidden by default and fades in on hover, with a working <code>navigator.clipboard.writeText</code> action and a "Copied!" confirmation state. Best for documentation pages, package install snippets, CLI command references, and any tutorial where a one-click copy is the primary reader action.

Best fordocumentation pages, package install snippets, CLI command references, and any tutorial where a one-click copy is the primary reader action.

Live Demo Try it

04 / 12

Code Container with Line Numbers and Filename Header

Pure CSS

A GitHub-dark inspired code container with editor-style filename tabs (<code>index.html</code> / <code>styles.css</code>) and a grid gutter that draws its line numbers from <code>counter-increment</code> in CSS — the numbers never get copied with the code, because they exist only as generated content in the gutter pseudo-element. Best for tutorial walk-throughs, multi-file documentation, before/after refactors, and any post where you reference specific line numbers in prose.

Best fortutorial walk-throughs, multi-file documentation, before/after refactors, and any post where you reference specific line numbers in prose.

Live Demo Try it

05 / 12

Horizontal Scroll & Word-Wrap Handling (Mobile Responsive)

Pure CSS

Two stacked code blocks comparing approaches: one with <code>overflow-x: auto</code> (clean gradient scrollbar, single line stays on one row) versus <code>white-space: pre-wrap</code> (graceful wrapping for long URLs and identifiers).

Best fordocumentation that shows long API endpoints, file paths, package names, or hash strings where the reader needs to choose which trade-off fits their layout.

Live Demo Try it

06 / 12

Glow-Effect & Neon Tech Code Block

Pure CSS

A cyberpunk-style code block on a faint grid background with a frosted <code>backdrop-filter: blur</code> panel, neon cyan / magenta / lime borders, and a pulsing animated glow that shifts the <code>box-shadow</code> color between cyan and magenta on a 3.4-second loop. <code>text-shadow</code> syntax accents make the code itself glow. Best for hackathon landing pages, gaming or AI product hero sections, retro-futurist portfolio sites, and any place where the code block needs to feel like a sci-fi terminal readout.

Best forhackathon landing pages, gaming or AI product hero sections, retro-futurist portfolio sites, and any place where the code block needs to feel like a sci-fi terminal readout.

Live Demo Try it

07 / 12

Glassmorphism Code Terminal

Pure CSS

A frosted-glass terminal floating over a vibrant multi-color radial-gradient backdrop with blurred orbs scattered behind it.

Best forAI product splash pages, design-tool marketing sites, summer / festival campaign chrome, and any context where the surrounding palette is louder than the code itself.

Live Demo Try it

08 / 12

Inline Code Snippet Pill Styling

Pure CSS

Editorial article styling on cream textured paper showing standalone <code><code></code> pills woven into serif prose — tiny <code>2px 8px</code> padding, full pill <code>border-radius: 999px</code>, color variants (green / blue / orange), and <code>vertical-align: middle</code> so the line-height never breaks around them.

Best forlong-form technical articles, design system documentation, blog posts mixing prose and short identifiers, and any reading surface where inline code references need to feel typographically settled, not jarring.

Live Demo Try it

09 / 12

Neumorphic Embedded Code Box

Pure CSS

A soft-UI card on a matched gray canvas where the code box uses dual <code>box-shadow: inset</code> (one light highlight, one dark shadow) to look recessed into the surface, with a raised outer card and a pressed-in icon badge for the tactile look.

Best fordesign-tool dashboards, settings panels embedded inside documentation, calm productivity apps, and any place a code reference needs to feel like part of the surrounding UI rather than a hard rectangle dropped on top.

Live Demo Try it

10 / 12

Split-Pane Code + Live Preview Container

Pure CSS

A two-pane CSS Grid card: the left pane renders a live interactive gradient button (with working hover lift + press feedback), the right pane shows the styled <code><pre><code></code> source that produced it.

Best fordocumentation tutorials, design-system component reference pages, MDX-driven docs sites, and any teaching context where reading the code is half the story and seeing it run is the other half.

Live Demo Try it

11 / 12

Minimalist Light Mode / Editorial Theme

Pure CSS

A bright Stripe-style docs aesthetic — crisp <code>#f8fafc</code> background, white panel, elegant Fraunces headings, and gentle indigo / green / orange syntax accents tuned for daylight readability.

Best forproduct docs, API reference sites, marketing pages targeting designers who want the page to feel calm, and any audience reading on bright screens during the day.

Live Demo Try it

12 / 12

Expandable / Collapsible Code Wrapper

Pure CSS

A long code snippet capped with <code>max-height</code> + <code>overflow: hidden</code> and a <code>linear-gradient(transparent, bg)</code> fade mask at the bottom hinting at more content.

Best fordocumentation pages with long source listings, FAQ answers that embed code, blog posts where the snippet is reference material rather than the focus, and any place a long block of code would otherwise dominate the page above the fold.

Live Demo Try it

FAQ

Frequently asked questions

How do I make a CSS code block with a copy button?

Wrap your <pre><code> in a container with position: relative, then absolutely position a <button> at the top-right with position: absolute; top: 12px; right: 12px. Hide it at rest (opacity: 0) and reveal on container hover via .codeblock:hover .copy { opacity: 1 }. The click handler calls navigator.clipboard.writeText(codeEl.innerText) inside a try / catch and toggles a temporary .is-done class with setTimeout for the "Copied!" confirmation state. The Copy Button demo (#03) in this gallery is the production-ready reference — it handles browsers without clipboard API permission gracefully and resets after 1.6 seconds.

How do I add line numbers to a CSS code block?

Use counter-reset + counter-increment + a ::before pseudo-element so the numbers are generated CSS content, not real text nodes — which means line numbers never get copied with the code when a visitor triple-clicks and copies. Set counter-reset: line on the wrapper, then each row gets ::before { counter-increment: line; content: counter(line); } styled inside a fixed-width gutter (grid-template-columns: 3.4em 1fr keeps the gutter and the code in two clean columns). The Line Numbers demo (#04) ships this with an editor-style filename tab bar so it doubles as a multi-file documentation panel.

How do I build a Mac terminal CSS code block with traffic-light controls?

The recipe is a dark window background, a title bar with three colored circles (red #ff5f57, yellow #febc2e, green #28c840) inside a 9px-gap flex container, and a centered filename. Add box-shadow: inset 0 1px 1px rgba(255,255,255,.4) to each dot for the canonical highlight. Wrap the whole window in a perspective: 1600px scene with transform: rotateX(6deg) rotateZ(-.4deg) for a subtle 3D tilt that straightens on hover. The Mac Window demo (#02) is the complete pattern with traffic-light dots, filename, and Fira Code typography.

How do I make a glassmorphism code block in CSS?

Three layered effects are required: (1) low-opacity white background rgba(255,255,255,.08) for the tint, (2) backdrop-filter: blur(22px) saturate(160%) to frost everything behind the panel, and (3) two inset shadows — inset 0 1px 0 rgba(255,255,255,.3) at top for the rim-light edge and a faint inset at bottom for the glass thickness. Always add -webkit-backdrop-filter for Safari. The Glassmorphism Code Terminal demo (#07) shows the production setup over a multi-color radial-gradient backdrop with blurred orbs, plus high-contrast text and text-shadow so accessibility doesn't suffer over the busy background.

Can I build an expandable / collapsible code block with no JavaScript?

Yes — the checkbox hack handles it cleanly. Hide an <input type="checkbox" id="exp">, pair it with a <label for="exp"> that acts as the toggle button, and use the general-sibling combinator: .toggle:checked ~ .codewrap pre { max-height: 1200px } overrides the resting max-height: 190px with a transition: max-height .45s. A linear-gradient fade mask at the bottom hints at hidden content; .toggle:checked ~ .codewrap .fade { opacity: 0 } dissolves it when expanded. The Expandable demo (#12) ships this with a rotating chevron and proper aria-label on the checkbox for screen readers.

How do I make a CSS code block responsive on mobile?

Two strategies, opposite trade-offs: (1) overflow-x: auto; white-space: pre keeps the source on one row and adds a horizontal scrollbar — preserves visual structure, costs a scroll affordance. (2) white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere wraps mid-token if needed — no scrollbar, costs the visual one-line meaning. Pick (1) for code where line structure matters (multi-line functions) and (2) for code with long single-token strings (URLs, hashes, file paths). The Responsive demo (#05) shows both side by side with a styled gradient scrollbar so you can decide per-context.

How do I style inline <code><code></code> pills inside paragraphs?

Three rules make inline <code> pills sit right inside prose: (1) font-size: .82em so the pill scales with the paragraph rather than fighting it; (2) vertical-align: middle so the rounded background never pushes the line taller than its siblings; (3) white-space: nowrap so identifiers like display: grid never get split across a line break. Add padding: 2px 8px; border-radius: 999px for the full pill shape, and use utility classes (.warn, .blue) to swap only the background and text color when you need variants. The Inline Pill demo (#08) demonstrates the pattern in a real article context with a drop-cap lead paragraph.

Are these CSS code blocks accessible to screen readers?

Yes. Every code sample uses real <pre><code> elements (not styled <div>s) so assistive tech announces them as preformatted code. Icon-only buttons (the Copy button in demo #03) carry aria-label. Decorative elements — traffic-light dots, scan-line blips, glow orbs — are marked aria-hidden="true" so they don't get spelled out. The Expandable toggle (demo #12) uses a visible-label checkbox with aria-label describing the action. Every continuous animation is wrapped in @media (prefers-reduced-motion: reduce) and either disabled or reduced to a snap transition.

Can I embed these code blocks in Shopify, WordPress, or any CMS?

Yes — each demo is plain HTML + scoped CSS (+ a small vanilla JS snippet for the Copy button only). For WordPress, paste the HTML and CSS into a Custom HTML block in the Gutenberg editor (the JS goes in a separate Custom HTML block with <script> tags). For Shopify, paste into the product or page template editor — the CSS goes into theme.css or a section's <style> block. All class names use the .ccb-XXX prefix so they never collide with your theme styles, the JS scopes its queries to the demo's wrapper so multiple code blocks on one page coexist, and there are no framework or build-step dependencies.

Related collections

30 CSS Badges

30 hand-coded CSS badges spanning collectibles, status indicators, certifications, notifications, membership tiers, and live-data displays. Upload progress, typing indicator, scrabble tile, keycap shortcut, transit indicator, origami medal, hreflang, E-E-A-T, crawl status, schema, search intent, core web vitals, ECG, build pipeline, countdown, live price, file extension, dice, signal bars, reading time, aurora, vaporwave, risograph, wax seal, conference lanyard, botanical tier, cyberpunk glitch, art deco, brutalist status, holographic.

css badge badge design upload progress Responsive

14 CSS Banners & Alerts

Hand-coded CSS banner and alert patterns covering every notification surface a real product needs — dismissible alerts, sticky announcements, semantic status alerts, cookie consent, form validation, toasts, live-update banners, and promotional hero banners. Pure CSS plus scoped JS — no framework, semantic HTML, accessibility-first, copy-paste ready.

banner alert notification Responsive

19 CSS Blockquote Designs

19 hand-coded CSS blockquote designs — pull quotes, testimonials, speech bubbles, tweet style, newspaper drop-caps, code comments and more. Semantic HTML, copy-paste ready.

blockquote css blockquote pull quote Responsive