Generator för gradientbakgrunder
Mjuka, trefärgade gradienter med kraftig suddighet är bakgrundsstilen på i stort sett varje SaaS-landningssida och de flesta skrivbordsbakgrunder som släppts de senaste fyra åren. Det här verktyget blandar tre hex-färger med en justerbar vinkel och en gaussisk oskärpa och exporterar resultatet i upplösning för skrivbord, telefon eller Zoom-bakgrund.
Så skapar du en gradientbakgrund
-
1
Välj tre färger
Justera hex-värdena direkt eller klicka på Slumpa för en oväntad palett.
-
2
Ställ in vinkeln
0–360°. 135° är "solnedgångs"-diagonalen; 90° är den sidledes "soluppgångs"-blandningen.
-
3
Justera suddigheten
Mer suddighet döljer gränserna mellan färgerna och jämnar ut hela ytan.
-
4
Exportera bilden
Ladda ner i den upplösning som passar din skärm eller telefon.
Rekommenderade exportstorlekar
| Mål | Upplösning |
|---|---|
| 4K-skrivbord | 3840 × 2160 |
| 1440p-skrivbord | 2560 × 1440 |
| 1080p-skrivbord | 1920 × 1080 |
| iPhone 15/16 | 1179 × 2556 |
| Android (modern) | 1080 × 2400 |
| Virtuell Zoom-bakgrund | 1920 × 1080 |
Palettips som alltid fungerar
- Komplementärt par + neutral: blå, orange, beige.
- Analog trio: välj tre nyanser inom 60° på färgcirkeln, lila, magenta, rosa.
- Varm-kall spänning: en varm (persika, röd), en kall (blågrön, marinblå) och en neutral (gräddvit).
- Monokrom: en nyans i tre ljushetsvärden skapar en subtil vägg med enhetlig stämning.
Varför suddigheten är viktig
En gradient med tre stopp utan suddighet visar skarpa gränser vid färgstoppen (“regnbågseffekten”). En filter: blur() på 60–100 px på en stor yta mjukar upp övergångarna till mjuka färgfält som påminner om bakgrunderna i macOS Big Sur eller iOS 16.
Live-förhandsvisning av CSS
background: linear-gradient(135deg, #FF6B35, #7B2D26, #1E3A8A);
filter: blur(80px);
Om du föredrar en skarp gradient utan suddighet, sänk filtret till 0 och överväg att byta till in oklch-interpolation för en perceptuellt jämn blandning.
Vanliga frågor
Ett suddighetsfilter samplar pixlar utanför ytan, och de är genomskinliga. Skapa i stället bakgrunden i ett större format, sudda den och beskär den sedan till den slutliga upplösningen, då förblir kanterna rena.
Den här generatorn använder tre färger. Fler färger tenderar att kännas som en skärmsläckare; tre är den optimala mängden för en lugn bakgrund.
Inte exakt. Telefonskärmar har högre proportioner än skrivbordsskärmar, så den diagonala vinkeln uppfattas annorlunda. Förhandsgranska i varje målstorlek och justera vinkeln om någon ser fel ut.
Nej. Ytan ritas lokalt, och bara den nedladdning du själv startar lämnar webbläsaren.
Relaterade verktyg
JSON-formaterare
Klistra in JSON för att snyggformatera med 2 eller 4 mellanslag, minifiera till kompakt utdata eller snabbt kontrollera syntaxen innan du kopierar resultatet.
Slumpgenerator för bokstäver
Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.
Färgpalettgenerator
Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.
ASCII till binär-konverterare
Konvertera valfri ASCII-sträng till dess binära representation. Varje tecken blir åtta bitar, separerade med mellanslag, redo att klistras in i en protokolltrace eller läxa.
Binär till oktal-konverterare
Konvertera binärt till oktalt genom att gruppera bitar tre och tre. Användbart för Unix-rättigheter, äldre system och kompakt numerisk visning.
HEX-färgväljare
Välj en färg visuellt och få HEX-, RGB-, HSL-, HSV- och CMYK-värden samt kontrast mot vitt och svart.