# Hero-Hintergrund für Websites: edle Verläufe, die schnell laden [Canonical HTML page](https://gradiently.design/de/guide/website-hero-background) Im Hero macht eine Website ihren ersten Eindruck, und dort wird sie am häufigsten langsam. Ein Hero mit Farbverlauf kann das Reichste und zugleich das Leichteste auf der Seite sein, wenn du ihn richtig baust. ## The short version - Ein Hero-Hintergrund ist das Bild, der Farbverlauf oder das Video hinter dem ersten Abschnitt einer Webseite, und er entscheidet oft, wie schnell sich die Seite anfühlt. - Reine CSS-Farbverläufe fügen fast nichts zum Download hinzu und skalieren perfekt auf jeden Bildschirm, das macht sie zum schnellsten Hero-Hintergrund. - Bild-Heroes sollten einen Master in 1920 mal 1080, moderne Formate wie AVIF oder WebP und responsive Größen nutzen und nie per Lazy Loading geladen werden. - Video-Heroes brauchen ein Posterbild, stummes Inline-Autoplay und eine stille Alternative für Menschen, die reduzierte Bewegung bevorzugen. - Egal welcher Hintergrund: Die Überschrift braucht auf jeder Bildschirmgröße eine ruhige Zone mit starkem Kontrast. 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](https://gradiently.design/de/guide/css-gradient-performance) und [Video-Hintergründe auf Websites](https://gradiently.design/de/guide/video-background-website). ## CSS, Bild oder Video: einen Hero-Hintergrund wählen | Ansatz | Download-Gewicht | Aussehen | Am besten für | | --- | --- | --- | --- | | CSS-Farbverlauf | Fast keins: Teil deines Stylesheets | Weiche Farbe, Leuchten, sanfte Meshes | Schnelle Websites, Produktseiten, Marken, die auf Farbe bauen | | Bild (AVIF, WebP, JPEG) | Mittel: hängt von Größe und Format ab | Alles: Textur, Fotografie, Körnung | Reiche Materialien, Fotos, komplexe Kunst | | Video | Schwer: meist die größte Datei der Seite | Bewegung, Tiefe, Atmosphäre | Launches und Marken, bei denen Bewegung der Kern ist | | WebGL oder Canvas | Skript plus Renderkosten | Lebendige, interaktive Farbe | Aushängeschild-Seiten mit Leistungsbudget dafür | Fang oben an und geh nur weiter nach unten, wenn das Design wirklich braucht, was die nächste Option hinzufügt. Der Hero enthält meist den Largest Contentful Paint der Seite, den Moment, in dem der Hauptinhalt erscheint. web.dev bewertet einen [LCP](https://web.dev/articles/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. ```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; } ``` Ein geschichteter CSS-Hero: zwei Leuchtflächen über einem Grundverlauf, mit einer deckenden Ausweichfarbe. Er wiegt ein paar hundert Bytes und füllt jeden Bildschirm. Hero-Leuchten, in einer Ebene angenähert: `radial-gradient(ellipse 60% 50% at 78% 18%, #e0629a 0%, #6b2f9a 45%, #1b1240 100%)` Das pinke Leuchten und der tiefviolette Grund aus dem Code oben, als ein einziger radialer Verlauf gezeichnet, damit du die Stimmung siehst. 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](https://gradiently.design/de/guide/css-noise-texture) zeigt, wie. Für reichere Farbe aus mehreren Punkten schichten [CSS-Mesh-Farbverläufe](https://gradiently.design/de/guide/css-mesh-gradient) 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. ```html ``` Ein responsives Hero-Bild: moderne Formate zuerst, feste Maße gegen Layoutverschiebungen, `fetchpriority="high"` und kein `loading="lazy"`. Ein leerer Alt-Text kennzeichnet es als dekorativ. > **Den Hero nie per Lazy Loading laden** `loading="lazy"` verzögert Bilder, bis sie nahe am sichtbaren Bereich sind. Der Hero ist schon im sichtbaren Bereich, also sorgt Lazy Loading nur dafür, dass der Hauptinhalt der Seite später erscheint. ## 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 Derselbe Hero in drei Formen. Farbverläufe passen sich von selbst an; Bilder brauchen einen gewählten Blickpunkt oder einen eigenen Zuschnitt für Smartphones. 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 ### Vermeiden - Eine Überschrift, die das hellste Leuchten kreuzt - Kontrast nur auf dem Desktop geprüft - Eine dunkle Überlagerung über dem ganzen Bild, um Text zu retten - Kontrastarmer Text auf einem mitteltonigen Verlauf ### Machen - Leuchtflächen abseits der Überschrift - Kontrast an jedem Breakpoint geprüft - Eine weiche Abdunklung nur dort, wo die Wörter stehen - Klar dunkel oder klar hell hinter dem Text 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](https://gradiently.design/de/guide/text-on-gradient) erklärt die Methode, [Text auf Bildern](https://gradiently.design/de/guide/text-over-image) 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](https://gradiently.design/de/guide/open-graph-image-size), damit geteilte Links zur Seite passen. ## FAQ ### Welche Größe sollte ein Hero-Hintergrundbild haben? Erstelle einen Master in 1920 mal 1080 und liefere kleineren Bildschirmen mit `srcset` kleinere Versionen aus. Nutze AVIF oder WebP mit JPEG als Ausweichlösung. ### Ist ein CSS-Farbverlauf schneller als ein Hero-Bild? Ja. Ein CSS-Farbverlauf besteht aus ein paar Zeilen in deinem Stylesheet ohne zusätzlichen Download und bleibt in jeder Größe scharf. Bilder und Videos fügen Dateien hinzu, die laden müssen, bevor der Hero fertig aussieht. ### Sollte ich mein Hero-Bild per Lazy Loading laden? Nein. Der Hero ist beim Öffnen der Seite sichtbar, Lazy Loading verzögert ihn also nur. Lade ihn sofort, füge `fetchpriority="high"` hinzu und setz Breite und Höhe. ### Wie bleibt eine Hero-Überschrift lesbar? Platziere helle Bereiche abseits der Wörter, nutze bei Bedarf eine weiche Abdunklung nur hinter der Überschrift und prüf den Kontrast auf jeder Bildschirmgröße.