Softonic

Generator för gradientbakgrunder

Steg 1 / 3
Nästa

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

    Välj tre färger

    Justera hex-värdena direkt eller klicka på Slumpa för en oväntad palett.

  2. 2

    Ställ in vinkeln

    0–360°. 135° är "solnedgångs"-diagonalen; 90° är den sidledes "soluppgångs"-blandningen.

  3. 3

    Justera suddigheten

    Mer suddighet döljer gränserna mellan färgerna och jämnar ut hela ytan.

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

Nej. Generatorn ritar gradienten på en yta som är större än utdata, applicerar oskärpan och beskär sedan internt till målstorleken, så kantpixlarna blir aldrig genomskinliga. Den nedladdade bakgrunden har rena kanter oavsett suddighetsnivå.

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

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

E-postvalidator

Validera en e-postadress: RFC 5322-syntaxkontroll, live-slagning av MX-poster samt detaljer om lokal del, domän och längd. Ingen e-post skickas.

EditorConfig-generator

Generera en .editorconfig-fil med dina regler för indragsstil och -storlek, radslut, teckenuppsättning och blanksteg för enhetlig formatering i alla IDE:er och editorer.

FPS-räknare

Mät webbläsarens FPS med requestAnimationFrame: utjämning, lägsta och högsta bildfrekvens, varningsgräns och valfri graf. Körs lokalt, utan uppladdning och utan API.

Verktyget finns på andra språk