The short version
- A hero background is the image, gradient or video behind the first section of a web page, and it is often the element that decides how fast the page feels.
- Pure CSS gradients add almost nothing to download and scale perfectly to any screen, which makes them the fastest hero background.
- Image heroes should use a 1920 by 1080 master, modern formats such as AVIF or WebP, responsive sizes, and should never be lazy-loaded.
- Video heroes need a poster image, muted inline autoplay and a still alternative for people who prefer reduced motion.
- Whatever the background, the headline needs a calm area with strong contrast on every screen size.
On this page
A hero background is the gradient, image or video behind the first section of a web page. It sets the mood of the whole site, and because it is the largest thing visible when the page opens, it often decides how fast the page feels. The fastest option is a pure CSS gradient, which downloads as a few lines of text and stays sharp at any size. Images and video can look richer but need careful sizing, formats and loading, covered below.
This guide compares the three approaches, then covers sizes, responsive crops, code and headline contrast. For the performance detail behind it, read CSS gradient performance and video backgrounds on websites.
CSS, image or video: choosing a hero background
| Approach | Download weight | Looks | Best for |
|---|---|---|---|
| CSS gradient | Almost none: part of your stylesheet | Smooth colour, glows, soft meshes | Fast sites, product pages, brands built on colour |
| Image (AVIF, WebP, JPEG) | Moderate: depends on size and format | Anything: texture, photography, grain | Rich materials, photos, complex art |
| Video | Heavy: usually the largest file on the page | Motion, depth, atmosphere | Launches and brands where movement is the point |
| WebGL or canvas | Script plus rendering cost | Live, interactive colour | Flagship pages with a performance budget for it |
The hero usually contains the page's Largest Contentful Paint, the moment the main content appears. web.dev treats an LCP of 2.5 seconds or less as good. A heavy hero image or video is the most common reason a page misses that, which is why the lightest option that achieves the look is almost always the right one.
Building a CSS gradient hero
Layering two or three gradients gets you surprisingly far: a base linear gradient for the overall direction, then soft radial glows for light. Blend in OKLCH to keep strong colours vivid. The result renders instantly and never needs a larger file for bigger screens.
.hero {
min-height: min(92svh, 900px);
display: grid;
place-items: center;
padding: clamp(4rem, 10vw, 8rem) 1.5rem;
color: #fbf8ff;
background-color: #1b1240; /* fallback while gradients paint */
background-image:
radial-gradient(ellipse 60% 50% at 78% 18%, oklch(0.72 0.19 350 / 0.75), transparent 70%),
radial-gradient(ellipse 55% 45% at 15% 85%, oklch(0.62 0.17 250 / 0.7), transparent 70%),
linear-gradient(160deg in oklch, #1b1240, #3a1d78 55%, #120c2c);
}
.hero h1 {
max-width: 16ch;
font-size: clamp(2.75rem, 6vw, 5.5rem);
line-height: 1.04;
text-align: center;
text-wrap: balance;
}radial-gradient(ellipse 60% 50% at 78% 18%, #e0629a 0%, #6b2f9a 45%, #1b1240 100%)To keep a CSS hero from looking like a generic preset, add texture. A fine SVG noise layer over the gradient hides banding on large screens and gives the colour a material feel; CSS noise texture shows how. For richer multi-point colour, CSS mesh gradients layer more glows.
Hero background image size and formats
If the hero needs an image, make a 1920 by 1080 master and export smaller versions for smaller screens. Serve modern formats: AVIF and WebP are usually much smaller than JPEG at the same visual quality, with JPEG as a fallback. Load the hero eagerly and tell the browser it matters.
<picture>
<source type="image/avif"
srcset="/hero-960.avif 960w, /hero-1440.avif 1440w, /hero-1920.avif 1920w"
sizes="100vw">
<source type="image/webp"
srcset="/hero-960.webp 960w, /hero-1440.webp 1440w, /hero-1920.webp 1920w"
sizes="100vw">
<img src="/hero-1920.jpg"
alt=""
width="1920" height="1080"
fetchpriority="high"
decoding="async"
class="hero-bg">
</picture>fetchpriority="high" and no loading="lazy". Empty alt text marks it as decorative.Responsive crops for hero backgrounds
A 16:9 hero on a phone becomes a tall, narrow slice. With object-fit: cover the browser crops from the centre by default, which may cut away the part that matters. Set object-position to keep the focal area, or serve a separate, taller crop for small screens with a media attribute on a source.
Desktop 16:9
1920 × 1080
Tablet, about 4:3
1600 × 1200
Phone, tall
1080 × 1920
This is where CSS gradients shine: glows are positioned in percentages, so they move with the shape. You can also change positions at a breakpoint, for example moving the main glow from the top right on desktop to the top centre on phones, where the headline stacks.
Headline contrast on a hero background
Avoid
- A headline crossing the brightest glow
- Contrast checked on desktop only
- A dark overlay over the whole image to rescue text
- Low-contrast text on a mid-tone gradient
Do
- Glows placed away from the headline
- Contrast checked at every breakpoint
- A soft scrim only where the words sit
- Clearly dark or clearly light behind the text
Check contrast at the lightest point behind the headline, not the average, and aim for at least 4.5:1 for smaller text and 3:1 for large headings. Text on a gradient covers the method, and text over image covers photo heroes.
If you design the hero in Gradiently, a Mark renders live at 1920 by 1080 or any custom size and moves its calmest region behind your words. Export a PNG or JPEG at up to three times the design's size for sharp images on high-density screens, or a 5 to 30 second loop for a video hero. Remember the same look for your Open Graph image, so shared links match the page.
Questions people ask
What size should a hero background image be?
Make a 1920 by 1080 master and serve smaller versions to smaller screens with srcset. Use AVIF or WebP with a JPEG fallback.
Is a CSS gradient faster than a hero image?
Yes. A CSS gradient is a few lines in your stylesheet with nothing extra to download, and it stays sharp at every size. Images and video add files that must load before the hero looks finished.
Should I lazy-load my hero image?
No. The hero is visible when the page opens, so lazy-loading only delays it. Load it eagerly, add fetchpriority="high" and set its width and height.
How do I keep a hero headline readable?
Place bright areas away from the words, use a soft scrim only behind the headline if needed, and check contrast at every screen size.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile
