Layout
Blurred cover hero
A detail-page header that blows up a record’s own artwork, blurs it toward the theme’s luminance, and scrims it with the page ground itself, so title text stays legible over artwork nobody has reviewed.
- layout
- hero
- css-only
- gradients
- no-assets
- contrast
<div class="bch-row">
<div class="bch-hero">
<div class="bch-media bch-media-a" aria-hidden="true"></div>
<div class="bch-scrim" aria-hidden="true"></div>
<div class="bch-content">
<div class="bch-cover bch-media-a"></div>
<div class="bch-text">
<p class="bch-eyebrow">Released</p>
<h3 class="bch-title">Real-time data import</h3>
<div class="bch-badges">
<span class="bch-badge">Streaming</span>
<span class="bch-badge">Async</span>
<span class="bch-badge">Beta</span>
</div>
</div>
</div>
</div>
<div class="bch-hero">
<div class="bch-media bch-media-b" aria-hidden="true"></div>
<div class="bch-scrim" aria-hidden="true"></div>
<div class="bch-content">
<div class="bch-cover bch-media-b"></div>
<div class="bch-text">
<p class="bch-eyebrow">Coming soon</p>
<h3 class="bch-title">Custom report builder</h3>
<div class="bch-badges">
<span class="bch-badge">Q3 2026</span>
<span class="bch-badge">Preview</span>
</div>
</div>
</div>
</div>
</div>Colors come from shared theme tokens — --surface, --ink, --border, --accent and friends — so this CSS carries no palette
of its own. Use Runnable file to copy the tokens along with it.
.bch-row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.bch-hero {
position: relative;
overflow: hidden;
flex: 1 1 320px;
min-height: 220px;
border-radius: var(--radius);
border: 1px solid var(--border);
padding: 1.5rem;
display: flex;
align-items: flex-end;
}
/* scale(1.3) is required, not decorative: a 22px blur samples past the
element's own edges, and without the extra scale that sampling pulls in
transparent pixels and fades the border into the page. */
.bch-media {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1.3);
filter: blur(22px) saturate(1.1) brightness(1.32);
}
/* Light gets less lift and less saturation than dark. Lifting a saturated
source image toward white produces hot, over-saturated colors that a
grey outline badge cannot sit on top of; dark mode has more headroom. */
[data-theme='dark'] .bch-media {
filter: blur(22px) saturate(1.4) brightness(0.55);
}
.bch-media-a { background-image: linear-gradient(160deg, #ff2d95 0%, #7a2bd6 50%, #00d4ff 100%); }
.bch-media-b { background-image: linear-gradient(160deg, #ffffff 0%, #eef1f4 55%, #dfe4ea 100%); }
/* The scrim is the page's own ground color at high alpha, not fixed black
or white, so text lands on very nearly the color the theme was already
contrast-checked against. One rule then covers every theme. The 78%
floor is load-bearing: at 160deg the weak end of the gradient sits over
the bottom-left of the hero, exactly where the title and its outline
badges sit, so the floor alone has to carry full legibility. */
.bch-scrim {
position: absolute;
inset: 0;
background-image: linear-gradient(
160deg,
color-mix(in srgb, var(--ground) 78%, transparent),
color-mix(in srgb, var(--ground) 92%, transparent)
);
}
.bch-content {
position: relative;
display: flex;
gap: 1.1rem;
align-items: flex-end;
flex-wrap: wrap;
min-width: 0;
}
.bch-cover {
width: 84px;
height: 120px;
border-radius: 6px;
flex: 0 0 auto;
background-size: cover;
background-position: center;
box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.7);
}
.bch-text { flex: 1 1 200px; min-width: 0; }
.bch-eyebrow {
margin: 0 0 0.15rem;
font-family: var(--mono);
font-size: 0.8125rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dim);
}
.bch-title { margin: 0; font-size: 1.375rem; line-height: 1.25; color: var(--ink); }
.bch-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.bch-badge {
font-family: var(--mono);
font-size: 0.8125rem;
padding: 0.15rem 0.55rem;
border-radius: 999px;
border: 1px solid currentColor;
color: var(--ink);
}Paste this into an agent to rebuild the pattern from scratch.
Build a detail-page header band that turns a record's own artwork into its background: the artwork enlarged and blurred fills the band, a small sharp copy of the same artwork sits in the foreground as a thumbnail, and the title, eyebrow, and badges are printed directly over the blur.
Use it for any detail page whose header art is uncontrolled — user uploads, third-party covers, syndicated thumbnails, anything nobody on the team has reviewed for how legible text would be on top of it. The whole point is that it degrades gracefully no matter what image lands in it: a near-black cover, a near-white cover, and a highly saturated cover should all produce a header where the title is comfortably readable, without per-image tuning. Skip it when the artwork is already curated and a fixed, checked color already sits behind the title — the extra blur and scrim machinery is solving a problem that does not exist there.
Three mechanisms carry the pattern, and the third is the one worth documenting explicitly because it is the one that actually guarantees the result rather than just improving the odds.
First, blur the enlarged copy past the point where any detail is legible — around 22px works for a full-bleed band. A blurred backdrop cannot compete with foreground text no matter what shapes or edges were in the original image.
Second, push the blurred layer toward the current theme's own luminance with a brightness() filter, and treat light and dark asymmetrically. Dark mode can take a strong push toward black, roughly brightness(0.55) with elevated saturation, because dark has headroom before things look muddy. Light mode needs the opposite direction with noticeably less force — around brightness(1.32) with saturation only mildly boosted — because pushing a saturated source color toward white produces harsh, oversaturated hues that a grey outline badge sitting on top cannot survive. Lifting toward white is the harder direction; give it less lift, not more.
Third — the mechanism people skip — make the scrim layer the page's own ground color at high alpha, not a fixed black-to-transparent or white-to-transparent gradient. A linear-gradient from roughly 78% to 92% of the ground color, laid at a diagonal angle, means the text is sitting on very nearly the same color the rest of the theme's text was already contrast-checked against, so a single rule works for every theme instead of needing a light-specific and dark-specific version. The 78% floor matters on its own: with a shallow diagonal, the weak end of the gradient lands exactly where the title and badges are anchored, so the floor alone — not the gradient's ramp — has to carry full legibility. A floor much below that, tested against a saturated cover, will visibly fail.
Two supporting details: apply "transform: scale(1.3)" to the blurred layer, because a large blur radius samples pixels past the element's own edges, and without the extra scale that sampling pulls in transparent pixels and visibly fades the border into the page. And keep the foreground thumbnail sharp and unblurred — it establishes what the backdrop actually is, since the backdrop alone has been blurred past recognition.