# Website hero background: gradients that look rich and load fast [Canonical HTML page](https://gradiently.design/guide/website-hero-background) The hero is where a site makes its first impression, and where it most often gets slow. A gradient hero can be both the richest and the lightest thing on the page, if you build it the right way. ## 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. 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](https://gradiently.design/guide/css-gradient-performance) and [video backgrounds on websites](https://gradiently.design/guide/video-background-website). ## 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 | Start at the top and move down only when the design genuinely needs what the next option adds. The hero usually contains the page's Largest Contentful Paint, the moment the main content appears. web.dev treats an [LCP](https://web.dev/articles/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. ```css .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; } ``` A layered CSS hero: two glows over a base gradient, with a solid fallback colour. It weighs a few hundred bytes and fills any screen. Hero glow, approximated in one layer: `radial-gradient(ellipse 60% 50% at 78% 18%, #e0629a 0%, #6b2f9a 45%, #1b1240 100%)` The pink glow and deep violet ground from the code above, drawn as a single radial gradient so you can see the mood. 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](https://gradiently.design/guide/css-noise-texture) shows how. For richer multi-point colour, [CSS mesh gradients](https://gradiently.design/guide/css-mesh-gradient) 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. ```html ``` A responsive hero image: modern formats first, explicit dimensions to prevent layout shift, `fetchpriority="high"` and no `loading="lazy"`. Empty alt text marks it as decorative. > **Never lazy-load the hero** `loading="lazy"` delays images until they are near the viewport. The hero is already in the viewport, so lazy-loading it only makes the page's main content appear later. ## 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 The same hero at three shapes. Gradients adapt on their own; images need a chosen focal point or a separate crop for phones. 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](https://gradiently.design/guide/text-on-gradient) covers the method, and [text over image](https://gradiently.design/guide/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](https://gradiently.design/guide/open-graph-image-size), so shared links match the page. ## FAQ ### 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.