Layout-driven · 2010s–present
Full Bleed
Images and backgrounds that extend to the absolute viewport edge with no margins — immersive, editorial, and cinematic.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(99% 0 0) - --fg
oklch(8% 0 0) - --muted
oklch(48% 0 0) - --surface
oklch(100% 0 0) - --surface-2
oklch(96% 0 0) - --border
oklch(86% 0 0) - --accent
oklch(44% 0.22 26) - --accent-fg
oklch(99% 0 0) - --focus
oklch(44% 0.22 26)
| Token | Value |
|---|---|
| --font-body | 'Inter', system-ui, sans-serif |
| --font-display | 'Bebas Neue', 'Impact', system-ui, sans-serif |
| --font-mono | ui-monospace, monospace |
| --radius | 0px |
| --radius-sm | 0px |
| --shadow | none |
| --shadow-lg | none |
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600&display=swap');
:root {
--bg: oklch(99% 0 0);
--fg: oklch(8% 0 0);
--muted: oklch(48% 0 0);
--surface: oklch(100% 0 0);
--surface-2: oklch(96% 0 0);
--border: oklch(86% 0 0);
--accent: oklch(44% 0.22 26);
--accent-fg: oklch(99% 0 0);
--focus: oklch(44% 0.22 26);
--font-body: 'Inter', system-ui, sans-serif;
--font-display: 'Bebas Neue', 'Impact', system-ui, sans-serif;
--font-mono: ui-monospace, monospace;
--radius: 0px;
--radius-sm: 0px;
--shadow: none;
--shadow-lg: none;
}Where it came from
Origin: Print magazine design — elements printed to the physical edge of the page
In print, "bleed" is content printed beyond the trim edge so no white gap appears after cutting. The web equivalent arrived as designers moved from fixed-width tables to full-viewport CSS. Full-bleed became a defining move in editorial web design, long-form journalism sites, and photo-heavy marketing pages. The challenge is maintaining readable type zones when image content reaches all four edges.
How to spot it
- Images and section backgrounds extend to the viewport edge — no outer margin
- Zero horizontal margin on hero and section backgrounds
- Type has its own internal padding, but the coloured or image block spans full width
- Strong section-to-section contrast — full-width bands of alternating colour or image
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Highly immersive and cinematic — the page feels like a physical space | Text contrast over full-bleed images requires careful treatment every time |
| Powerful for photography, video, and art-direction-first design | Inner containers still need a max-width for readable line lengths |
| Clear hierarchy from full-width section breaks | Can feel empty at very wide viewports without strong image content |
In the wild
- Long-form journalism sites
- Photography studio and agency landing pages
- Film and music artist release pages
Use it when
Editorial, portfolio, or image-first marketing sites where immersion and visual impact are the primary goals.