Gradient hero with search
A full-bleed gradient hero with a prominent search field.
<section class="hero">
<div class="inner">
<h1>Every UK postcode, one lookup away</h1>
<p class="lede">Two million addresses, updated weekly from Royal Mail. Free for up to
a thousand lookups a month.</p>
<form class="finder" role="search">
<label class="sr" for="q">Postcode or street</label>
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="11" cy="11" r="7"/><path d="M20 20l-4.3-4.3"/>
</svg>
<input type="search" id="q" name="q" placeholder="LS1 4DT or Mill Lane, Leeds" autocomplete="off">
<button type="submit">Look up</button>
</form>
<p class="hint">Try <a href="#">SW1A 1AA</a>, <a href="#">EH1 1YZ</a> or <a href="#">BT1 5GS</a></p>
</div>
</section>* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.65 system-ui, -apple-system, sans-serif; }
.hero {
/* the solid colour is the fallback if the gradient is not understood */
background: #232c6b;
background:
radial-gradient(60% 90% at 20% 0%, rgba(124, 92, 255, .55), transparent 60%),
radial-gradient(50% 80% at 90% 20%, rgba(31, 138, 91, .45), transparent 60%),
linear-gradient(160deg, #2a3abf, #101b2d);
color: #fff;
padding: 88px 24px 92px;
}
.inner { max-width: 720px; margin: 0 auto; text-align: center; }
.hero h1 {
font-size: clamp(2rem, 1.1rem + 3.4vw, 3.3rem);
line-height: 1.1;
letter-spacing: -0.024em;
text-wrap: balance;
}
.lede {
margin: 18px auto 0;
max-width: 48ch;
font-size: 1.08rem;
/* not pure white: full contrast on every line is tiring to read */
color: #d4dcf2;
}
/* ---- search ---- */
.finder {
position: relative;
display: flex;
gap: 8px;
margin-top: 34px;
padding: 8px;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 14px;
backdrop-filter: blur(8px);
}
.icon {
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
fill: none;
stroke: #8e9cc4;
stroke-width: 2;
stroke-linecap: round;
pointer-events: none;
}
.finder input {
flex: 1;
min-width: 0;
font: inherit;
font-size: 1rem;
padding: 13px 14px 13px 44px;
border: 0;
border-radius: 9px;
background: #fff;
color: #16202e;
}
.finder input::placeholder { color: #7b88a1; }
.finder input:focus { outline: 2px solid #fff; outline-offset: 2px; }
.finder button {
font: inherit;
font-size: .96rem;
font-weight: 500;
padding: 13px 24px;
border: 0;
border-radius: 9px;
background: #fff;
color: #16202e;
cursor: pointer;
white-space: nowrap;
}
.finder button:hover { background: #e9edf7; }
.hint { margin-top: 16px; font-size: .87rem; color: #a8b4d4; }
.hint a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sr {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
@media (max-width: 560px) {
.hero { padding: 60px 20px 64px; }
.finder { flex-direction: column; }
.finder button { width: 100%; }
}How it works
Three gradients stacked, not one. Two soft radial washes over a linear base. A single two-stop linear gradient always looks like a template; layering a couple of large, low-opacity radials over it gives depth without any image. The gradient generator will build the individual layers.
The solid colour above the gradient is a real fallback. A browser that does not understand one of the gradient functions discards that whole declaration and keeps the previous one. Two lines, and the difference between a dark hero and white text on white.
The lede is not pure white. #d4dcf2 rather than #fff. Maximum contrast on every element flattens the hierarchy and is genuinely more tiring to read on a dark background. The headline keeps full white; the supporting text steps back.
The search field is white, not translucent. A glassy input over a gradient looks good in a mockup and fails contrast in practice, because the background behind the text changes across the field. The frosted treatment is on the container around it, where no text sits.
The icon is pointer-events: none. Without it, clicking the magnifying glass does nothing instead of focusing the field — a small thing that people notice.
Accessibility notes
The search field has a real label, visually hidden with clip-path rather than display: none, which would hide it from screen readers as well.
role="search" on the form makes it a landmark, so a screen reader user can jump straight to it.
Contrast is the risk with any gradient. Check the headline against the lightest point of the gradient and the darkest, not just the middle — automated checkers sample one pixel and will pass a combination that fails in the corner.
The focus outline on the input is white with an offset, so it stays visible against the gradient. A default browser outline frequently disappears on a coloured background.
Making it yours
Change the three gradient layers and the whole hero changes character. Keep the radials large and faint; small, strong ones read as blobs.
backdrop-filter is decorative here. If it is unsupported the container falls back to a flat translucent panel, which is fine.
For a light version, invert the colours and drop the layer opacities to around 0.15 — gradients that look subtle on dark are usually far too strong on white.
Related templates
Centered hero
Headline, sub, two buttons and a trust row. The default that earns its place.
HTMLCSSTailwindSplit hero with image
Text on one side, image on the other, stacking cleanly on mobile.
HTMLCSSSingle-file landing page
A complete landing page in one file — hero, features, call to action.
HTMLCSSCheck your version
Once you have edited this, the HTML validator will catch any tag you left unclosed, and the formatter will tidy the indentation. Both run in your browser.