Verlaufs-Hintergrundbild-Generator
Sanfte, dreifarbige Verläufe mit starker Unschärfe sind der Hintergrundstil jeder SaaS-Landingpage und der meisten Desktop-Hintergründe, die in den letzten vier Jahren veröffentlicht wurden. Dieses Tool mischt drei Hex-Farben mit einem einstellbaren Winkel und einer Gaußschen Unschärfe und exportiert das Ergebnis in der Auflösung für Desktop, Handy oder Zoom-Hintergrund.
So erstellen Sie einen Gradient-Hintergrund
-
1
Wählen Sie drei Farben
Passen Sie die Hex-Werte direkt an oder klicken Sie auf Zufällig für eine Überraschungs-Palette.
-
2
Winkel einstellen
0–360°. 135° ist die "Sonnenuntergang"-Diagonale; 90° ist die "Sonnenaufgang"-seitliche Mischung.
-
3
Die Unschärfe anpassen
Höhere Unschärfe verbirgt die Grenzen zwischen den Farben und glättet die gesamte Leinwand.
-
4
Das Bild exportieren
Laden Sie in der Auflösung herunter, die zu Ihrem Display oder Handy passt.
Empfohlene Ausgabegrößen
| Ziel | Auflösung |
|---|---|
| 4K Desktop | 3840 × 2160 |
| 1440p Desktop | 2560 × 1440 |
| 1080p Desktop | 1920 × 1080 |
| iPhone 15/16 | 1179 × 2556 |
| Android (modern) | 1080 × 2400 |
| Zoom virtueller Hintergrund | 1920 × 1080 |
Palette-Hinweise, die immer funktionieren
- Komplementäres Paar + neutral: blau, orange, beige.
- Analoges Trio: wählen Sie drei Farbtöne innerhalb von 60° im Farbkreis, Lila, Magenta, Pink.
- Warm-kühle Spannung: eine warme (Pfirsich, Rot), eine kühle (Türkis, Marineblau), eine neutrale (Creme).
- Monochrom: ein Farbton in drei Helligkeitsstufen schafft eine dezente, in sich stimmige Wand.
Warum die Unschärfe wichtig ist
Ein dreistufiger Verlauf ohne Unschärfe zeigt scharfe Grenzen an den Farbstopps (der “Regenbogeneffekt”). Ein filter: blur() von 60–100 px auf einer großen Leinwand verwäscht die Übergänge zu weichen Farbflächen, die an die Hintergründe von macOS Big Sur oder iOS 16 erinnern.
Live CSS-Vorschau
background: linear-gradient(135deg, #FF6B35, #7B2D26, #1E3A8A);
filter: blur(80px);
Wenn Sie einen klaren Gradient ohne Unschärfe bevorzugen, senken Sie den Filter auf 0 und ziehen Sie in Betracht, auf in oklch-Interpolation für eine wahrnehmbar gleichmäßige Mischung umzuschalten.
Häufig gestellte Fragen
Ein Unschärfefilter erfasst Pixel außerhalb der Leinwand, und diese sind transparent. Für einen Hintergrund generieren Sie in einer größeren Größe, verwischen Sie, und schneiden Sie dann auf die endgültige Auflösung, die Ränder bleiben sauber.
Dieser Generator verwendet drei. Mehr Farben wirken oft wie ein Bildschirmschoner; drei sind der ideale Punkt für einen ruhigen Hintergrund.
Nicht genau. Die Verhältnisse von Handys sind höher als die von Desktops, sodass der diagonale Winkel anders wirkt. Vorschau in jeder Zielgröße und passen Sie den Winkel an, wenn einer seltsam aussieht.
Nein. Die Leinwand wird lokal gezeichnet und nur der Download, den Sie auslösen, verlässt den Browser.
Verwandte Tools
Zufallsbuchstaben-Generator
Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.
JSON-Formatierer
Fügen Sie JSON ein, um es mit 2 oder 4 Leerzeichen lesbar zu formatieren, kompakt zu minifizieren oder vor dem Kopieren schnell die Syntax zu prüfen.
Zufälliger Farbgenerator
Erzeuge 1 bis 50 zufällige HEX-Farben mit Farbfeldern zum Prüfen, Kopieren und Verwenden in CSS, Tests oder Palettenideen.
HEX-Farbwähler
Wählen Sie eine Farbe visuell aus und erhalten Sie HEX-, RGB-, HSL-, HSV- und CMYK-Werte plus Kontrastprüfung gegen Weiß und Schwarz.
Binär-zu-ASCII-Konverter
Fügen Sie Binärdaten (durch Leerzeichen getrennte Bytes oder einen langen Bitstrom) ein und erhalten Sie den ASCII-Text, den sie darstellen. Unterstützt 7-Bit- und 8-Bit-Codierungen.
Farbpaletten-Generator
Erstellen Sie monochromatische, analoge, komplementäre, triadische oder tetradische Farbpaletten aus einer HEX-Basisfarbe und exportieren Sie kopierfertige CSS-Variablen.