Hero-bakgrund: gradienter som ser rika ut och laddar snabbt

En hero-bakgrund är gradienten, bilden eller videon bakom den första sektionen på en webbsida. Den sätter stämningen för hela webbplatsen, och eftersom den är det största som syns när sidan öppnas avgör den ofta hur snabb sidan känns. Det snabbaste alternativet är en ren CSS-gradient, som laddas ner som några rader text och förblir skarp i vilken storlek som helst. Bilder och video kan se rikare ut men kräver noggrann storlek, format och laddning, vilket vi går igenom nedan.

Den här guiden jämför de tre sätten och går sedan igenom storlekar, responsiva beskärningar, kod och rubrikkontrast. För prestandadetaljerna bakom, läs prestanda för CSS-gradienter och videobakgrunder på webbplatser.

CSS, bild eller video: välj hero-bakgrund

Hero-ytan innehåller oftast sidans Largest Contentful Paint, ögonblicket då huvudinnehållet visas. web.dev räknar en LCP på 2,5 sekunder eller mindre som bra. En tung hero-bild eller video är den vanligaste orsaken till att en sida missar det, och därför är det lättaste alternativet som ger utseendet nästan alltid det rätta.

Bygga en CSS-gradient-hero

Att lägga två eller tre gradienter i lager tar dig förvånansvärt långt: en linjär basgradient för den övergripande riktningen och sedan mjuka radiella glöd för ljuset. Blanda i OKLCH för att hålla starka färger levande. Resultatet renderas direkt och behöver aldrig en större fil för större skärmar.

.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;
}

För att en CSS-hero inte ska se ut som en generisk förinställning kan du lägga till textur. Ett fint SVG-brusskikt över gradienten döljer band på stora skärmar och ger färgen en materialkänsla, och CSS-brustextur visar hur. För rikare flerpunktsfärg lägger CSS-meshgradienter fler glöd i lager.

Storlek och format för hero-bilder

Om hero-ytan behöver en bild gör du en master på 1920 gånger 1080 och exporterar mindre versioner för mindre skärmar. Servera moderna format: AVIF och WebP är oftast mycket mindre än JPEG vid samma visuella kvalitet, med JPEG som reserv. Ladda hero-ytan direkt och tala om för webbläsaren att den är viktig.

<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>

Responsiva beskärningar för hero-bakgrunder

En hero i 16:9 blir på en telefon en hög, smal remsa. Med object-fit: cover beskär webbläsaren från mitten som standard, vilket kan skära bort det som spelar roll. Ställ in object-position för att behålla fokusytan, eller servera en separat, högre beskärning för små skärmar med ett media-attribut på en source.

Dator 16:9

1920 × 1080

Surfplatta, cirka 4:3

1600 × 1200

Telefon, hög

1080 × 1920

Här briljerar CSS-gradienter: glöd placeras i procent, så de följer med formen. Du kan också ändra positionerna vid en brytpunkt, till exempel flytta huvudglöden från övre högra hörnet på datorer till övre mitten på telefoner, där rubriken staplas.

Rubrikkontrast på en hero-bakgrund

Kontrollera kontrasten vid den ljusaste punkten bakom rubriken, inte medelvärdet, och sikta på minst 4,5:1 för mindre text och 3:1 för stora rubriker. Text på gradient går igenom metoden, och text över bild tar upp foto-heroer.

Om du designar hero-ytan i Gradiently renderas en Mark live i 1920 gånger 1080 eller valfri egen storlek och flyttar sin lugnaste del bakom dina ord. Exportera en PNG eller JPEG i upp till tre gånger designens storlek för skarpa bilder på skärmar med hög täthet, eller en loop på 5 till 30 sekunder för en video-hero. Tänk på samma utseende för din Open Graph-bild, så att delade länkar matchar sidan.