Gradient-wallpapergenerator

Volgende

Sfeervolle, driekleurige gradienten met een sterke vervaging zijn de achtergrondstijl van elke SaaS-landingspagina en van de meeste bureaubladachtergronden van de afgelopen vier jaar. Dit hulpmiddel mengt drie hexkleuren met een instelbare hoek en een gaussische vervaging, en exporteert het resultaat op een resolutie voor bureaublad, telefoon of Zoom-achtergrond.

Zo maak je een gradientwallpaper

  1. 1

    Kies drie kleuren

    Pas de hexwaarden rechtstreeks aan of klik op Willekeurig voor een verrassend palet.

  2. 2

    Stel de hoek in

    0–360°. 135° is de diagonaal van de "zonsondergang"; 90° is de zijwaartse "zonsopgang"-menging.

  3. 3

    Pas de vervaging aan

    Meer vervaging verbergt de grenzen tussen de kleuren en maakt het hele canvas gladder.

  4. 4

    Exporteer de afbeelding

    Download op de resolutie die past bij je scherm of telefoon.

Aanbevolen uitvoerformaten

Doel Resolutie
4K-bureaublad 3840 × 2160
1440p-bureaublad 2560 × 1440
1080p-bureaublad 1920 × 1080
iPhone 15/16 1179 × 2556
Android (modern) 1080 × 2400
Virtuele Zoom-achtergrond 1920 × 1080

Palettips die altijd werken

  • Complementair paar + neutraal: blauw, oranje, beige.
  • Analoog drietal: kies drie tinten binnen 60° op de kleurencirkel, paars, magenta, roze.
  • Warm-koele spanning: één warme kleur (perzik, rood), één koele kleur (blauwgroen, marineblauw) en één neutrale kleur (crème).
  • Monochroom: één kleurtint in drie helderheidswaarden creëert een subtiele, qua sfeer samenhangende wand.

Waarom de vervaging belangrijk is

Een gradient met drie stops zonder vervaging toont scherpe grenzen bij de kleurstops (het “regenboogeffect”). Een filter: blur() van 60–100 px op een groot canvas verzacht de overgangen tot vloeiende kleurvlakken die doen denken aan de wallpapers van macOS Big Sur of iOS 16.

Live CSS-voorbeeld

background: linear-gradient(135deg, #FF6B35, #7B2D26, #1E3A8A);
filter: blur(80px);

Als je een scherpe gradient zonder vervaging wilt, zet de filter dan op 0 en overweeg om over te schakelen naar in oklch-interpolatie voor een perceptueel gelijkmatige menging.

Veelgestelde vragen

Een vervagingsfilter bemonstert pixels buiten het canvas, en die zijn transparant. Genereer voor een wallpaper op een groter formaat, vervaag en snijd daarna bij tot de uiteindelijke resolutie, dan blijven de randen schoon.

Deze generator gebruikt drie kleuren. Meer kleuren voelen al snel als een screensaver; drie is de ideale keuze voor een rustige wallpaper.

Niet precies. Telefoonverhoudingen zijn langer dan die van een bureaublad, waardoor de diagonale hoek anders overkomt. Bekijk een voorbeeld op elk doelformaat en pas de hoek aan als er een vreemd uitziet.

Nee. Het canvas wordt lokaal getekend en alleen de download die je zelf start verlaat de browser.

Gerelateerde tools