Hero-Hintergrund für Websites: edle Verläufe, die schnell laden

Ein Hero-Hintergrund ist der Farbverlauf, das Bild oder das Video hinter dem ersten Abschnitt einer Webseite. Er bestimmt die Stimmung der ganzen Website, und weil er beim Öffnen das größte sichtbare Element ist, entscheidet er oft, wie schnell sich die Seite anfühlt. Die schnellste Option ist ein reiner CSS-Farbverlauf, der als ein paar Zeilen Text geladen wird und in jeder Größe scharf bleibt. Bilder und Videos können reicher aussehen, brauchen aber sorgfältige Größen, Formate und Ladeweisen, wie unten beschrieben.

Dieser Leitfaden vergleicht die drei Ansätze und behandelt dann Größen, responsive Zuschnitte, Code und den Kontrast der Überschrift. Die Details zur Leistung dahinter findest du in Performance von CSS-Farbverläufen und Video-Hintergründe auf Websites.

CSS, Bild oder Video: einen Hero-Hintergrund wählen

Der Hero enthält meist den Largest Contentful Paint der Seite, den Moment, in dem der Hauptinhalt erscheint. web.dev bewertet einen LCP von 2,5 Sekunden oder weniger als gut. Ein schweres Hero-Bild oder Video ist der häufigste Grund, warum eine Seite das verfehlt, deshalb ist die leichteste Option, die den Look erreicht, fast immer die richtige.

Einen Hero mit CSS-Farbverlauf bauen

Mit zwei oder drei übereinandergelegten Verläufen kommst du erstaunlich weit: ein linearer Grundverlauf für die Gesamtrichtung, dann weiche radiale Leuchtflächen für Licht. Misch in OKLCH, damit kräftige Farben lebendig bleiben. Das Ergebnis erscheint sofort und braucht für größere Bildschirme nie eine größere Datei.

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

Damit ein CSS-Hero nicht wie eine beliebige Voreinstellung aussieht, füge Textur hinzu. Eine feine SVG-Rauschebene über dem Verlauf versteckt Banding auf großen Bildschirmen und gibt der Farbe etwas Stoffliches; CSS-Rauschtextur zeigt, wie. Für reichere Farbe aus mehreren Punkten schichten CSS-Mesh-Farbverläufe weitere Leuchtflächen.

Größe und Formate für Hero-Hintergrundbilder

Braucht der Hero ein Bild, erstelle einen Master in 1920 mal 1080 und exportiere kleinere Versionen für kleinere Bildschirme. Liefere moderne Formate aus: AVIF und WebP sind bei gleicher sichtbarer Qualität meist deutlich kleiner als JPEG, mit JPEG als Ausweichlösung. Lade den Hero sofort und sag dem Browser, dass er wichtig ist.

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

Responsive Zuschnitte für Hero-Hintergründe

Ein 16:9-Hero wird auf dem Smartphone zu einem hohen, schmalen Streifen. Mit object-fit: cover schneidet der Browser standardmäßig von der Mitte aus zu, was den wichtigen Teil abschneiden kann. Setz object-position, um den Blickpunkt zu halten, oder liefere für kleine Bildschirme einen eigenen, höheren Zuschnitt mit einem media-Attribut an einer source.

Desktop 16:9

1920 × 1080

Tablet, etwa 4:3

1600 × 1200

Smartphone, hoch

1080 × 1920

Hier glänzen CSS-Farbverläufe: Leuchtflächen werden in Prozent positioniert und wandern mit der Form. Du kannst Positionen auch an einem Breakpoint ändern, etwa das Hauptleuchten auf dem Desktop oben rechts und auf Smartphones oben mittig platzieren, wo die Überschrift umbricht.

Kontrast der Überschrift auf einem Hero-Hintergrund

Prüf den Kontrast an der hellsten Stelle hinter der Überschrift, nicht am Durchschnitt, und strebe mindestens 4,5:1 für kleineren Text und 3:1 für große Überschriften an. Text auf einem Farbverlauf erklärt die Methode, Text auf Bildern behandelt Heroes mit Fotos.

Gestaltest du den Hero in Gradiently, rendert ein Mark live in 1920 mal 1080 oder jeder eigenen Größe und schiebt seinen ruhigsten Bereich hinter deine Wörter. Exportiere ein PNG oder JPEG bis zur dreifachen Größe des Designs für scharfe Bilder auf hochauflösenden Bildschirmen oder einen Loop von 5 bis 30 Sekunden für einen Video-Hero. Denk an denselben Look für dein Open-Graph-Bild, damit geteilte Links zur Seite passen.