Free Tool
Header background generator
Generate a header background for a website hero, then take it as a lightweight SVG or a @1x/@2x PNG pair. Free, no signup.
A header background is the artwork that sits behind the heading at the top of a page, with the words themselves written in HTML on top of it. Because it stretches to whatever width the viewport happens to be, the right export is usually SVG — a few kilobytes that stay sharp at any size — with a PNG pair at @1x and @2x as the fallback for pipelines that cannot take vectors.
Generate, export, drop in
- 1
Find a quiet variation. Text is off by default here, because your heading is going to live on top in HTML. Press S until the busy part of the artwork sits where your copy will not, and use Density in the Advanced panel to calm the whole thing down.
- 2
Match it to your palette. The five colour swatches under the palette list take hex values directly, so you can paste your brand tokens in and get artwork that belongs to your design system rather than near it.
- 3
Take the SVG. The ⋯ button beside Download has “Download SVG” and “Copy SVG to clipboard” — the second one is the quick path into a CSS file or a component. The plain Download button gives you the PNG at the selected size if you need a raster instead.
Putting it into your CSS
A header background wants to cover its box, stay centred as the viewport changes, and never force the section to be taller than its content. That is three declarations:
.site-header {
background-image: url("/images/header.svg");
background-size: cover;
background-position: center;
}
/* Raster fallback: let the browser pick the density it needs. */
@supports not (background-image: url("x.svg")) {
.site-header {
background-image: image-set(
url("/images/header@1x.png") 1x,
url("/images/header@2x.png") 2x
);
}
}
If the heading on top needs more separation than the artwork gives it, add a gradient in front
of the image rather than dimming the file —
linear-gradient(to right, rgb(255 255 255 / 0.9), transparent)
layered above the background keeps the image reusable at other contrasts.
Vector, raster, and the weight of a hero
A header background has a property that distinguishes it from almost every other image on a site: nobody is looking at it. It exists to give the top of the page some character while the heading does the communicating. That changes what “good” means — the measure is not fidelity, it is whether it adds atmosphere without costing anything, and the cheapest way to add atmosphere is geometry rather than pixels.
This is the argument for taking the SVG. The artwork here is built from paths and gradients, so the vector file is the source rather than a conversion of it. One file serves every screen density, scales to an ultrawide monitor without softening, and can be inlined directly in a stylesheet or a component so it costs no extra network request at all. The equivalent raster has to be exported twice for density, is fixed at whatever width you chose, and gets heavier precisely as the screen gets larger.
Weight matters more at the top of a page than anywhere else, because the hero is frequently the element the browser measures for Largest Contentful Paint. A background that arrives late does not just look unfinished — it shows up in your Core Web Vitals. A small vector inlined into CSS is effectively free by this measure. A large PNG fetched as a background-image is a separate round trip that paints after everything around it, which is the pattern that turns an otherwise quick page into a mediocre score.
Shape deserves some thought too. Headers are wide and short — somewhere between 2:1 and 3:1
for a typical hero band — and they are cropped horizontally on narrow screens because
background-size: cover
fills the box from the centre outward. Artwork with its interest spread across the frame
survives that; artwork with a single focal point parked at one end loses it on a phone. The
Crop panel above exists for exactly this: move the frame until the part you want is near the
middle.
The last decision is the one most often got wrong, which is whether to bake the heading into the image. For a social card there is no choice — the platform renders a picture and nothing else. For a website header there is every reason not to: HTML text reflows on a small screen, can be selected and translated, is read aloud correctly by assistive technology, and can be changed without opening a design tool. Keep the words in the markup, keep the atmosphere in the background, and the two can be improved independently for as long as the page lives.
Export sizes for headers
| Size | Pixels | What it asks for | Source |
|---|---|---|---|
| 3:1 | 1500×500 | Banners and section dividers. | Our own recommendation, not a platform requirement. |
| 2:1 | 1600×800 | Wide cards and email headers. | Our own recommendation, not a platform requirement. |
| Blog hero @1x | 1600×900 | 1600x900 (16:9) — pair with @2x for retina displays. | Our own recommendation, not a platform requirement. |
| Blog hero @2x | 3200×1800 | 3200x1800 (16:9), served to 2x-density screens via srcset. | Our own recommendation, not a platform requirement. |
Specs verified October 2026.
These are conventions rather than requirements — nothing on the web enforces a hero size, and the SVG export makes the question mostly academic. The numbers matter when you are exporting PNGs and want a sensible @1x/@2x pair.
One made with this tool
A 3:1 header band with no text in it at all — the headline for a page like this belongs in the markup on top. Exported from the same editor above, as a single SVG that would weigh a few kilobytes in a stylesheet.
Related free tools
Or browse all free tools.
FAQs
Frequently Asked Questions
SVG for anything that stretches across a viewport. These backgrounds are vector shapes, so the SVG stays sharp at any width and is usually a fraction of the weight of the equivalent PNG. Take the PNG when something in your pipeline cannot handle SVG — some email clients, some CMS image fields, and older build tooling.
Wider and shorter than you think: a header strip is typically 2:1 or 3:1, and 1500×500 covers most hero bands. If you export PNG, make a @1x and a @2x and let the browser choose with image-set. If you export SVG, the question does not arise — one file covers every density.
Give the text a dependable backing rather than hoping the artwork cooperates. The Scrim control in the Text panel washes one side of the image toward the canvas colour, which is the same trick as a CSS gradient overlay but baked into the file. Then check the contrast of your real heading colour against the lightest part of the area it sits on, not against the image as a whole.
It can, because a hero image is frequently the element that defines your Largest Contentful Paint. An SVG of a few kilobytes inlined into your CSS costs almost nothing. A large PNG fetched as a background-image is a separate request that blocks nothing but paints late, which is exactly the shape of a poor LCP score — so prefer the vector, and if you must use a raster, keep it small and serve it in a modern format.
You can, but for a website header you usually should not. A heading written in HTML is selectable, searchable, translatable, readable by assistive technology and re-flowable on a phone; the same words flattened into a background are none of those. The preset here starts with text switched off for that reason.
Yes — commercial use included, no attribution required, and nothing stamped onto the export. Everything is generated in your browser rather than uploaded anywhere.
Ready to Build Smart Forms with AI?
Ovoform is your gateway to effortless, intelligent, and high-performing funnel experiences to expand your global reach. Build smarter forms, automate form workflows, and gather powerful insights — all in minutes.
Get Started FreeNo credit card required. Unlimited responses.