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

Webpack-konfigurationsgenerator

Skapa en webpack.config.js för webpack 5 med vanlig JavaScript, React eller Vue: TypeScript, Babel, CSS eller Sass, bilder, HtmlWebpackPlugin, en utvecklingsserver och raden för npm install.

Protocol Buffers-avkodare

Avkoda Protobuf-byte lokalt från hex, Base64, Base64URL, text eller fil, granska fälttolkningar och exportera en privat rapport.

XSD-validerare

Validera ett XML-dokument mot ett XSD-schema och rapportera element- och typavvikelser med exakta radnummer.

YAML till JSON

Omvandla YAML-konfiguration till JSON för verktyg och API:er som bara accepterar JSON. Hanterar ankare, merge-nycklar och nästlade strukturer.

XML-formaterare

Snygga till XML-dokument med konsekvent indrag och fånga formfel med exakta radnummer.

XML till JSON

Omvandla XML-dokument till ren JSON, med bevarade attribut, textnoder och arrayer där det behövs. Tre stilar: kompakt, Badgerfish eller literal.

Verktyget finns på andra språk